Babel 如何支持 ES6 的原生模块

引言

伴随着 ES6(ECMAScript 2015) 的发布，JavaScript 进入了一个新纪元。原生模块这一特性的加入更是让前端开发变得更加灵活和有趣。然而，由于原生模块的兼容性问题，它在一些不支持 ES6 的浏览器中无法正常运行。那么该如何在这些浏览器中使用 ES6 的原生模块呢？Babel 就是解决这个问题的利器。

Babel 简介

Babel 是一个 JavaScript 编译器，它的主要作用是将当前版本的 JavaScript 代码转换成一个或多个供旧版本 JavaScript 解析器理解的代码。Babel 支持最新的 JavaScript 标准，如 ES6、ES7 等，并可以将它们转换成能够被大多数浏览器解析的 ES5 代码，从而实现跨浏览器的兼容性。

Babel 对原生模块的支持需要用到两个插件，分别是 @babel/plugin-transform-modules-commonjs 和 @babel/preset-env。前者用于将模块语法转换成 CommonJS 规范，后者用于根据浏览器的支持情况，将 ES6 转换成 ES5 的代码。

安装 Babel

首先我们需要安装 Babel 和相关插件。在安装的过程中，我们需要分别安装 @babel/core、@babel/plugin-transform-modules-commonjs、@babel/preset-env 和 babel-loader。

npm install --save-dev @babel/core @babel/plugin-transform-modules-commonjs
npm install --save-dev @babel/preset-env babel-loader

接下来，我们需要在项目根目录下创建一个 .babelrc 文件，用于配置 Babel 的转码规则。

配置 Babel

在 .babelrc 中，我们可以设置 Babel 的预设和插件。以支持 ES6 的原生模块为例，配置如下所示。

// javascriptcn.com 代码示例
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "last 2 versions",
            "ie >= 9"
          ]
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-modules-commonjs"
  ]
}

在上面的配置中，@babel/preset-env 插件的 targets 配置项用于指定需要支持的浏览器版本。在这个例子中，我们将目标浏览器设置为最新的两个版本和 IE9 及以上版本。@babel/plugin-transform-modules-commonjs 插件用于将 ES6 的模块语法转换成 CommonJS 规范。

使用 Babel

配置好 Babel 之后，我们还需要在项目中使用它。在 Webpack 中使用 Babel，我们可以在 webpack.config.js 文件中进行设置。其中，需要在 module 中添加 babel-loader 的配置，以将 JavaScript 文件交给 Babel 进行转码。

// javascriptcn.com 代码示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-modules-commonjs']
          }
        }
      }
    ]
  }
}

运行 Webpack 命令进行打包之后，就可以在不支持原生模块的浏览器上正常运行 ES6 的代码了。

总结

通过 Babel 的转换，我们可以在不支持 ES6 原生模块的浏览器中使用这一特性。同时，Babel 还支持许多其他的特性，为前端开发提供了更多的灵活性和可操作性。熟练使用 Babel，可以提高开发效率和代码质量，是前端开发人员必备的工具之一。

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