前言
随着 JavaScript 应用的不断复杂化，使用模块化编程已经成为现代 JavaScript 开发的标配，如今在前端工程中使用模块化不仅可以提高代码的可读性和可维护性，同时也可以减少代码间的耦合度，降低代码出错的概率，提供代码重用性等等。但是，目前并不是所有浏览器都支持最新的 ES6 模块化语法，因此我们需要使用工具来将代码转换成低版本代码，同时又不失去 ES6 模块化的便利性。这时候，Babel 和 Webpack 就成为了很好的选择。
本文将基于 Babel 和 Webpack 的基础上讲解如何实现 JavaScript 模块化加载，并通过示例代码展示整个流程。
Babel
Babel 是一个 JavaScript 编译器，它可以将 ES6、ES7 等最新的 JavaScript 语法转换成浏览器支持的 ES5 语法，同时也可以识别 JSX 等非标准语法。Babel 是设置模块化系统的基础。
安装与配置
Babel 提供了很多命令行工具，我们使用 @babel/cli 和 @babel/core 能够快速搭建项目。首先打开终端，进入项目根目录，创建一个 package.json 文件。
- --- ---- --
接下来，安装 @babel/cli 和 @babel/core。
- --- ------- ---------- ---------- -----------
安装完成后，可以在项目根目录中创建一个 .babelrc 配置文件，并将要使用的插件加入到其中。
-
---------- -
-
--------------------
-
---------- -
----------- --- ---- ----- - ---------- ---- -- -- ---
-
-
-
-
-在这个示例中，使用了 @babel/preset-env 这个 preset 来转换代码。targets 选项中可以指定支持的浏览器版本，这里选择支持全球使用人数超过 1% 的浏览器，最新两个版本，但不支持 IE 8 及以下的版本。
示例代码
这里我们来模拟一个简单的模块化文件。创建一个 src 目录，该目录下创建一个名为 logger.js 的文件。
------ ------- -------- ------------ - --------------------- -
在 src 目录下创建一个名为 index.js 的文件。
------ --- ---- ----------- ---------- ---------
我们通过 ES6 的 import 和 export 来创建了一个简单的模块化文件，同时使用了 Babel 来将其转换为 ES5 语法的代码。接下来，我们将创建一个命令行工具将 Babel 转换之后的代码保存到 dist 文件夹下。
在 package.json 文件中新增以下脚本命令：
-
---------- -
-------- ------ --- -- -----
-
-运行 npm run build，Babel 会将 src 目录下的所有 JavaScript 文件编译成 ES5 语法，并保存在 dist 文件夹下。
Webpack
Webpack 是一个静态资源打包工具。它可以将 JavaScript、CSS、图片等资源打包成一个或多个静态资源文件，并自动引入需要的依赖关系。Webpack 可以提供模块化加载的便利，可以显著减少前端应用的加载时间和带宽占用。
安装与配置
同样的，我们需要在项目根目录中创建一个新的 package.json 文件。
- --- ---- --
接下来，安装 Webpack。
- --- ------- ---------- ------- -----------
在项目根目录下创建一个名为 webpack.config.js 的文件。
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
-
--在这个示例中，我们将 Webpack 的入口文件设置为 src/index.js，输出打包后的文件为 dist/bundle.js 文件。Webpack 会自动将依赖文件打包到这个文件中。
示例代码
我们需要为 Webpack 配置一个合适的加载器（loader）以支持将 Babel 转换后的 ES5 模块化代码打包到 bundle.js 文件中。
首先，需要安装 @babel/preset-env 和 babel-loader。
- --- ------- ---------- ------------ -----------------
在 webpack.config.js 配置文件中添加以下代码段，来设置 Babel loader 的配置。
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
--
-这段代码告诉 Webpack，在打包过程中应该使用 babel-loader 来加载 .js 文件，并使用 @babel/preset-env 来转换代码。
现在，我们可以创建一个简单的 HTML 文件，引入打包后的 bundle.js。实际上，在真实的前端项目中，打包好的 bundle.js 文件可能会通过 CDN 或者直接放置到服务器上为用户提供服务。
--------- -----
----- ----------
------
----- --------------- --
----- ---------------------------- ----------------- --
----- --------------- ---------------------------- ------------------ --
-------------- ---------------
-------
------
------- --------------------------------
-------
-------接下来，我们启动 Webpack。
- --------------------------- ------ -----------
这个命令会将 src/index.js 打包成 dist/bundle.js 文件。启动服务器，你就可以在浏览器上访问页面并看到 "Hello Babel!" 的输出。
总结
本文讲解了如何使用 Babel 和 Webpack 实现 JavaScript 模块化加载，在实际开发中，模块化加载不仅可以提高代码的可读性和可维护性，同时也可以减少代码间的耦合度，降低代码出错的概率，提供代码重用性等等。
我们通过该文学习了如何使用两个工具实现模块化加载，具有一定的指导意义。同时，本文提供了示例代码，并且针对每个步骤进行了详细的解析。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64963dc048841e9894326855