使用 Babel 和 Rollup 打包 JavaScript 应用-JavaScript中文网-JavaScript教程资源分享门户

在现代的前端开发中，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 之前，需要先安装以下依赖：

npm install @babel/cli @babel/core @babel/preset-env -D

@babel/cli：是 Babel 的命令行工具。
@babel/core：是 Babel 的核心包。
@babel/preset-env：是 Babel 提供的 ES6+ 转译规则集合。

然后，在项目根目录下创建 .babelrc 文件，并添加以下代码：

// javascriptcn.com 代码示例
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "ie 11",
            "last 3 versions"
          ]
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

这里指定使用 preset-env 来转换 ES6+ 代码，并且设置了目标浏览器和插件配置。具体可以查看 Babel 官网。

配置 Rollup

在开始配置 Rollup 之前，需要先安装以下依赖：

npm install rollup rollup-plugin-babel rollup-plugin-uglify -D

rollup：Rollup 的核心包。
rollup-plugin-babel：用于 Rollup 的 Babel 插件。
rollup-plugin-uglify：用于压缩 Rollup 打包后的文件。

然后，在项目根目录下创建一个 rollup.config.js 文件，在其中添加以下代码：

// javascriptcn.com 代码示例
import babel from 'rollup-plugin-babel';
import { uglify } from 'rollup-plugin-uglify';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd',
    name: 'MyLibrary'
  },
  plugins: [
    babel({
      exclude: 'node_modules/**'
    }),
    uglify()
  ]
};

这里指定了我们需要打包的入口文件和打包输出文件的位置，同时指定了打包文件的格式和名称。plugins 中配置了使用 Babel 和压缩 Rollup 打包后的文件。具体可以查看 Rollup 官网。

示例代码

假设我们有以下的 JavaScript 应用程序：

const myArray = [1, 2, 3, 4, 5];

const filteredArray = myArray.filter(item => item % 2 === 0);

console.log(`Filtered Array: ${filteredArray}`);

将 Babel 和 Rollup 配置好之后，我们可以执行以下命令进行打包：

npx rollup -c rollup.config.js

这里的 -c 参数表示使用配置文件 rollup.config.js 进行打包。打包完成后，我们可以在 dist/ 文件夹中找到生成的打包文件 bundle.js。这个 JavaScript 应用程序会被 Rollup 打包成一个函数，函数名为 MyLibrary。

最后，我们可以在 HTML 中引入打包后的 JavaScript 应用程序并运行：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript App</title>
  </head>
  <body>
    <script src="dist/bundle.js"></script>
    <script>
      console.log(MyLibrary);
    </script>
  </body>
</html>

运行后，在浏览器的控制台中将会输出筛选后的数组 [2, 4]。

总结

本文介绍了如何使用 Babel 和 Rollup 这两个工具来打包 JavaScript 应用程序。Babel 可以将 ES6+ 代码转换成 ES5 代码，同时检测代码错误和进行代码质量的分析。Rollup 可以将多个 JavaScript 模块合并为一个文件，减少打包后的代码大小，提高应用程序性能。如果你想了解更多细节和用法，可以查看官方文档。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653e46177d4982a6eb7d04a3