作为前端开发者，我们经常使用到 Babel 来转译我们编写的 JavaScript 代码，以便让我们的代码兼容到不同的浏览器和环境中。但是，每次搭建项目时都需要手动配置 Babel 也是一件十分繁琐的事情。
因此，我们推荐使用 npm 包 @znemz/js-common-babel-config-clone 来快速搭建 Babel 环境，方便我们快速的开始项目开发。
安装
要使用 @znemz/js-common-babel-config-clone，首先我们需要在项目目录下安装该包。可以通过以下命令安装：
--- ------- ----------------------------------- ----------
安装成功后，我们可以在项目的 package.json 文件中看到如下配置：
-
------------------ -
-------------------------------------- -------
-
-配置
在成功安装 @znemz/js-common-babel-config-clone 后，我们需要对 Babel 进行配置以便使之生效。
首先，我们需要在项目的根目录下添加 .babelrc 文件，并添加以下内容：
- ---------- ------------------------------------- -
这段代码作用是告诉 Babel 按照我们引入的 package 中的配置来执行。
接下来，我们需要安装一些 Babel 的依赖，可以通过以下命令安装：
--- ------- ----------- ----------------- ------------------- ------------ ----------
安装成功后，我们在 package.json 文件的 devDependencies 部分中可以看到如下内容：
-
------------------ -
-------------- -----------
-------------------- -----------
---------------------- -----------
--------------- ---------
-------------------------------------- -------
-
-至此，我们已经成功通过 @znemz/js-common-babel-config-clone 配置了 Babel 环境。
示例
下面，我们提供一个简单的示例，以便更好的理解如何使用该 npm 包。
目录结构
--- ------------
--- --------
--- --------
--- ---
--- --------.babelrc
- ---------- ------------------------------------- -
package.json
-
------- ------------------------------------------
---------- --------
---------- -
-------- ------ --- -- ----
--
------------------ -
-------------- -----------
-------------------- -----------
---------------------- -----------
--------------- ---------
-------------------------------------- -------
-
-src/index.js
----- - - -- -- - ------------------ -------- -- ----
index.js
-----------------
执行 npm run build 命令后，会在根目录下生成一个 lib 目录，里面的文件为经过 Babel 转译处理后的代码。
---- -------- --- - - -------- --- - ------------------ -------- -- ----
通过以上的示例，大家可以更好的理解如何使用 @znemz/js-common-babel-config-clone 了。在实际项目中，该工具可以帮助我们快速搭建 Babel 环境，提升我们项目开发的效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedc4ddb5cbfe1ea06121a9