npm 包 @znemz/js-common-babel-config-clone 使用教程

作为前端开发者，我们经常使用到 Babel 来转译我们编写的 JavaScript 代码，以便让我们的代码兼容到不同的浏览器和环境中。但是，每次搭建项目时都需要手动配置 Babel 也是一件十分繁琐的事情。

因此，我们推荐使用 npm 包 @znemz/js-common-babel-config-clone 来快速搭建 Babel 环境，方便我们快速的开始项目开发。

安装

要使用 @znemz/js-common-babel-config-clone，首先我们需要在项目目录下安装该包。可以通过以下命令安装：

npm install @znemz/js-common-babel-config-clone --save-dev

安装成功后，我们可以在项目的 package.json 文件中看到如下配置：

{
  "devDependencies": {
    "@znemz/js-common-babel-config-clone": "1.0.0"
  }
}

配置

在成功安装 @znemz/js-common-babel-config-clone 后，我们需要对 Babel 进行配置以便使之生效。

首先，我们需要在项目的根目录下添加 .babelrc 文件，并添加以下内容：

{
  "extends": "@znemz/js-common-babel-config-clone"
}

这段代码作用是告诉 Babel 按照我们引入的 package 中的配置来执行。

接下来，我们需要安装一些 Babel 的依赖，可以通过以下命令安装：

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

安装成功后，我们在 package.json 文件的 devDependencies 部分中可以看到如下内容：

-- -------------------- ---- -------
-
  ------------------ -
    -------------- -----------
    -------------------- -----------
    ---------------------- -----------
    --------------- ---------
    -------------------------------------- -------
  -
-

至此，我们已经成功通过 @znemz/js-common-babel-config-clone 配置了 Babel 环境。

示例

下面，我们提供一个简单的示例，以便更好的理解如何使用该 npm 包。

目录结构

├── package.json
├── index.js
├── .babelrc
└── src
    └── index.js

.babelrc

{
  "extends": "@znemz/js-common-babel-config-clone"
}

package.json

-- -------------------- ---- -------
-
  ------- ------------------------------------------
  ---------- --------
  ---------- -
    -------- ------ --- -- ----
  --
  ------------------ -
    -------------- -----------
    -------------------- -----------
    ---------------------- -----------
    --------------- ---------
    -------------------------------------- -------
  -
-

src/index.js

const a = () => {
  console.log('Hello World');
};

a();

index.js

require('./lib');

执行 npm run build 命令后，会在根目录下生成一个 lib 目录，里面的文件为经过 Babel 转译处理后的代码。

'use strict';

var a = function a() {
  console.log('Hello World');
};

a();

通过以上的示例，大家可以更好的理解如何使用 @znemz/js-common-babel-config-clone 了。在实际项目中，该工具可以帮助我们快速搭建 Babel 环境，提升我们项目开发的效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc4ddb5cbfe1ea06121a9