在现代的前端开发中，JavaScript 应用程序的构建和打包是必不可少的。为了兼容不同的浏览器和 ES 版本，我们需要使用编译器来将现代的 JavaScript 代码转换成可被不同浏览器兼容的代码。除此之外，将多个 JavaScript 文件打包成一个文件也是提高应用性能的有效手段。在本文中，我们将介绍如何通过 Babel 和 Rollup 两个工具来打包 JavaScript 应用。
Babel 简介
Babel 是一个 JavaScript 编译器，它能够将 ES6+ 代码转换成 ES5 代码。Babel 的核心是通过插件系统来支持新的 JavaScript 语言特性，同时还整合了优秀的工具链来满足不同的需求。
使用 Babel 可以帮助我们解决以下几个方面的问题：
- 语言特性不受限制：使用最新的 JavaScript 语言特性，而不用考虑浏览器是否支持。
- 兼容性：可以转换、支持不同版本的 JavaScript 语言特性。
- 代码质量：Babel 可以帮我们检测代码错误，并进行代码质量的分析。
Rollup 简介
Rollup 是一个 JavaScript 模块打包工具，它能够打包出来更为精简、高效的 JavaScript 应用程序。Rollup 能够将 JavaScript 模块打包成一个单独的文件，这个文件更加简单、可重用，并且也更易于通过 HTTP 传输。
使用 Rollup 可以解决以下几个方面的问题：
- 打包效率：能够减少打包后的代码大小，提高应用程序性能。
- 代码复用：通过将相同代码的多个副本合并为一个，这可以提高应用程序的可维护性和可扩展性。
如何使用
配置 Babel
在开始配置 Babel 之前，需要先安装以下依赖：
--- ------- ---------- ----------- ----------------- --
@babel/cli：是 Babel 的命令行工具。@babel/core：是 Babel 的核心包。@babel/preset-env：是 Babel 提供的 ES6+ 转译规则集合。
然后，在项目根目录下创建 .babelrc 文件，并添加以下代码：
-
---------- -
-
--------------------
-
---------- -
----------- -
--- ----
----- - ---------
-
--
-------------- --------
--------- -
-
-
-
-这里指定使用 preset-env 来转换 ES6+ 代码，并且设置了目标浏览器和插件配置。具体可以查看 Babel 官网。
配置 Rollup
在开始配置 Rollup 之前，需要先安装以下依赖：
--- ------- ------ ------------------- -------------------- --
rollup：Rollup 的核心包。rollup-plugin-babel：用于 Rollup 的 Babel 插件。rollup-plugin-uglify：用于压缩 Rollup 打包后的文件。
然后，在项目根目录下创建一个 rollup.config.js 文件，在其中添加以下代码：
------ ----- ---- ----------------------
------ - ------ - ---- -----------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
----- -----------
--
-------- -
-------
-------- -----------------
---
--------
-
--这里指定了我们需要打包的入口文件和打包输出文件的位置，同时指定了打包文件的格式和名称。plugins 中配置了使用 Babel 和压缩 Rollup 打包后的文件。具体可以查看 Rollup 官网。
示例代码
假设我们有以下的 JavaScript 应用程序：
----- ------- - --- -- -- -- --- ----- ------------- - ------------------- -- ---- - - --- --- --------------------- ------ -------------------
将 Babel 和 Rollup 配置好之后，我们可以执行以下命令进行打包：
--- ------ -- ----------------
这里的 -c 参数表示使用配置文件 rollup.config.js 进行打包。打包完成后，我们可以在 dist/ 文件夹中找到生成的打包文件 bundle.js。这个 JavaScript 应用程序会被 Rollup 打包成一个函数，函数名为 MyLibrary。
最后，我们可以在 HTML 中引入打包后的 JavaScript 应用程序并运行：
--------- -----
------
------
----- ----------------
----------------- -----------
-------
------
------- ------------------------------
--------
-----------------------
---------
-------
-------运行后，在浏览器的控制台中将会输出筛选后的数组 [2, 4]。
总结
本文介绍了如何使用 Babel 和 Rollup 这两个工具来打包 JavaScript 应用程序。Babel 可以将 ES6+ 代码转换成 ES5 代码，同时检测代码错误和进行代码质量的分析。Rollup 可以将多个 JavaScript 模块合并为一个文件，减少打包后的代码大小，提高应用程序性能。如果你想了解更多细节和用法，可以查看官方文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653e46177d4982a6eb7d04a3