前言
随着前端开发技术的不断发展，ES6 已经逐渐成为了前端开发的一个必备基础知识点。而一些旧的项目或者库却无法使用 ES6 的模块化语法，这时我们就需要通过 Babel 进行转换，使其支持 ES6 的模块化语法。本文将利用 Babel 支持 ES6 对非模块化的 JS 文件进行模块化打包，并提供示例代码。
Babel 的作用
Babel 是一个 JavaScript 编译器，可以将 ES6 或者更新版本的 JavaScript 代码转换为可以在传统的浏览器或者环境中运行的代码。除此之外，Babel 还可以将 ES6 的模块化语法转换为 CommonJS 或者 AMD 规范，以便于在非 ES6 环境中进行模块化开发。
非模块化代码的模块化打包
在非模块化的代码中，全局变量往往扮演了非常重要的角色。我们需要通过 Babel 将这些全局变量封装到一个自定义的模块中，以便于在其他模块中进行调用。
以非模块化的代码文件 app.js 为例，代码如下所示：
var a = 1;
var b = 2;
function sum() {
return a + b;
}
console.log('sum:', sum());我们需要将其打包为一个模块化的文件，在打包之前，我们需要安装以下依赖：
- @babel/core
- @babel/preset-env
- babel-loader
安装完成后，我们可以在 Webpack 的配置文件中进行以下配置：
-- -------------------- ---- -------
-------------- - -
------ ---------------
------- -
--------- -----------
--
------- -
------ --
----- --------
-------- ---------------
------- --------------
--
-
--在上面的配置中，我们指定了 entry 和 output，并添加了 babel-loader 的规则。
在 babel-loader 中，我们可以通过设置 Babel 的 presets 来对代码进行转换，使其支持 ES6 的模块化语法。在这里我们可以使用 @babel/preset-env，它会将代码转换为符合当前浏览器或者环境的规范，并将 ES6 的模块化语法转换为 CommonJS 规范。
我们可以在 .babelrc 或者 Webpack 的配置文件中加入以下配置：
{
"presets": ["@babel/preset-env"]
}在配置完成后，我们就可以执行 Webpack 的打包命令：
npx webpack
打包完成后，我们就可以得到一个名为 bundle.js 的文件，其中包含了我们的代码以及转换后的模块化语法，示例如下：
-- -------------------- ---- ------- -------- ------------------ - -- ---------------- -------- --- --- ------ ----- -------- ---- ---------------- - --- -------- -------- --- --- ------- -------- -------- --------- ----------------------------- - -------- -------- ---- ----- -- ------ -- -- ----- -------- -------------------------------- - -------- --------- ----------------------------------- -------- --- -------- ---- ------ - --- ------ ---- --- -- ---- --- ------ -------- ----- ------ - -------------------------- - - -------- ----- --------- -------- ----- ------ -------- ----------- -- -------- ---- -------- -------- ---- ------- --- ------ -------- -------- ---------------------------------------- ------- --------------- --------------------- -------- -------- ---- ---- --- ------ -- ------ -------- ---------- - ----- -------- -------- ---- ------ --- ------- -- --- ------ -------- -------- --------------- -------- -- -------- -------- --- ------ --- ------- ------ --------------------- -------- ---------------------- - -------- -------- -------- --- ------ --- ------ ----- -------- ---------------------- - ----------------- -------- -------- --- ------ ------ -------- --- ------- ------- -------- ---------------------- - ----------------- ----- ------- - -------- ------------------------------------ ------ - -------- --------------------------------- ----- - ----------- ----- ---- ------ --- -------- --- -------- --- -------- -------- --- ------ ---------- -- ------- -------- ---------------------- - ----------------- - -------- ----------- ------ --- ----------- -- ------------------- - -------- --------------------------------- ------------------- - ------ -------- --- -------- --- -------- -------------------------------- ------------- - ------ ---- --- -------- --- -------- -------- --- ------ - ---- --------- ------ -------- --- ---- - -- ----- -- - ------ --- ------- -- -------- --- ---- - -- ----- --- ---------- -- ----- ---- --- -- -------- --- ---- - -- ------ ----- ---- ------- -- ------ -------- --- ---- - ---- ------ ---- ------- -------- ---------------------- - --------------- ----- - -------- --------- - -- ----- - --------------------------- -------- --------- - -- ------ ------ -------- ---------- - -- -- ------ ----- --- -------- -- ----- -- ----------------- ------ ------ -------- ----- -- - -------------------- -------- ---------------------------- -------- --------------------------- ---------- - ----------- ----- ------ ----- --- -------- --------- - - -- ------ ----- -- --------- ------- --- -- ------ ------------------------- ---- ------------- - ------ ----------- ------------ ------ -------- -------- --- -------- --- -------- -------- --- ---------------- -------- --- ------------- ---- ----------- ------- -------- ---------------------- - ---------------- - -------- ----- ------ - ------ -- ----------------- - -------- ----------- ------------ - ------ ------------------ - - -------- ----------- ------------------ - ------ ------- -- -------- ------------------------------- ---- -------- -------- -------- ------- -------- --- -------- -------- --- ------------------------------------ -------- ---------------------- - ---------------- --------- - ------ -------------------------------------------- ---------- -- -------- -------- --- ----------------------- -------- ---------------------- - --- -------- -------- -------- -------- --- ---- ----- ------ --- ------ ------- -------- ------- ----------------------------------------- - ---------------- -------- -- -------------------------------------------------------------------------- -------- -- ----- --------------- -------------------------- ---- ------------ ---- ---------------------- --- -- ------ ------- ----- -- ----- ----------------- -------- - --- - - -- --- - - -- -------- ----- - ------ - - -- - ------------------- ------- ----- -- -------- ---
在打包后的代码中，我们可以看到代码被封装到了一个自定义的模块中，并且说明了模块的 ID 和依赖项。我们可以在其他模块中通过 CommonJS 的方式引入该模块，从而使用其中的代码。
总结
通过 Babel 的转换，我们可以将非模块化的代码转换为符合当前浏览器或者环境的规范，并支持 ES6 的模块化语法。这不仅能提高代码的可维护性和可读性，还能使我们在不同的环境中更方便地进行开发和调试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64caaf025ad90b6d041c499d