Babel 7.0 发布，新特性解析-JavaScript中文网-JavaScript教程资源分享门户

最近，Babel 团队宣布发布 Babel 7.0 ，经过多个月的开发和测试，Babel 在新版中加入了很多全新的特性，比如自定义 Polyfill ，支持 ECMAScript 新特性，更强的插件系统，更快的编译速度等等。本文将分别针对这些特性进行深度剖析，希望读者能够更加深入地了解 Babel 7.x 版本的技术细节及其学习与指导意义。

自定义 Polyfill

在过去的版本中，Babel 提供了两个 preset: es2015 和 es2016 用于转换 ES6 和 ES7 代码，同时提供了一个 env preset 用于根据 Babel 的具体使用和环境，自动选择需要转换的代码。然而，当项目中想要使用某些特性时，比如使用 Array.prototype.flat 方法，我们还是需要手动引入 core-js 这样的 polyfill 库，以确保代码在低版本浏览器中正常运行。

在 Babel 7.0 中，可以通过 @babel/polyfill 而不是 core-js 进行 polyfill ，更加方便快捷。除此之外，Babel 7.0 新增了自定义 polyfill 功能，使得我们可以仅仅针对项目中需要的特性来添加 polyfill ，方便同时最小化对代码的污染。

比如，在 .babelrc.js 中添加以下代码：

// www.javascriptcn.com code example
{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": false,
      "useESModules": true
    }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "@babel/plugin-proposal-object-rest-spread",
    "mysite/beefy-polyfill-plugin"
  ]
}

其中，在 plugins 的最后增加了一份 polyfill 插件 mysite/beefy-polyfill-plugin 。该插件会根据插件的 polyfills 配置，为项目导入需要的 polyfill 。示例如下：

// www.javascriptcn.com code example
// mysite/beefy-polyfill-plugin.js
const polyfills = {
  Object: {
    entries: 'core-js/fn/object/entries',
    values: 'core-js/fn/object/values',
  },
  Array: {
    flat: 'core-js/fn/array/flat',
  },
};

module.exports = ({ types: t }) => ({
  visitor: {
    // ...
  },

  pre() {
    this.builtIns = new Set(Object.keys(polyfills).map(item => Object.keys(polyfills[item])));
  },

  post() {
    const imports = new Set();
    if (this.builtIns.size > 0) {
      for (const lib of this.file.get('helperGenerator').list) {
        if (this.builtIns.has(lib.name)) {
          imports.add([lib.identifier, polyfills[lib.name][lib.alias]]);
          this.builtIns.delete(lib.name);
        }
      }
    }
    for (const [identifier, path] of imports) {
      this.file.path.unshiftContainer('body', t.importDeclaration(
        [t.importNamespaceSpecifier(identifier)],
        t.stringLiteral(path)
      ));
    }
  },
});

在 plugins 中引入使用 mysite/beefy-polyfill-plugin ，并进行配置，如下：

// www.javascriptcn.com code example
{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": false,
      "useESModules": true
    }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "@babel/plugin-proposal-object-rest-spread",
    ["mysite/beefy-polyfill-plugin", {
      "polyfills": {
        "Object": {
          "entries": "core-js/fn/object/entries",
          "values": "core-js/fn/object/values"
        },
        "Array": {
          "flat": "core-js/fn/array/flat"
        }
      }
    }]
  ]
}

这将会自定义三个如果 api 被使用时导入的 helpers ，Object.entries()、Object.values() 和 Array.flat() ，这些 helpers 会进一步通过自定义 Polyfill 导入相应的 polyfill。

支持 ECMAScript 及新特性的更好插件系统

在 Babel 7.0 中，插件也经过了一定的改进。插件是让 Babel 提供默认或者自定义的转换规则，这些规则有助于将 ES6 或者其他类型的 JavaScript 代码转换为兼容低级别的 JavaScript 代码。Babel 7.0 新增了一些支持 ECMAScript 新特性的插件，比如新的 @babel/plugin-proposal-nullish-coalescing-operator 和 @babel/plugin-proposal-optional-chaining 分别支持两种新的运算符 ?？及 ?. 。

除此之外，在这个版本中升级了插件系统，对于我们开发者而言，允许使用的插件和 preset 都在 @babel 库中，而不是在公共 npm 上。这意味着，我们现在只需要在本地 yarn 或 npm 安装特定插件，而不是先在 npmjs.com 上找一个合适的插件，再安装到本地项目中。

更快的编译速度

Babel 自 6.0 以来，经过了多个大版本的优化，其中一项重要的需求就是提升编译速度。在 Babel 7.0 中，缩短了预计算时间，进行了优化，提高了速度。同时，新版本中的 parser 的速度与突破了旧版的 bottleneck 。

总体而言，Babel 7.0 在编译速度方面有了明显的提升，这对于提高前端项目的开发效率和交付速度都非常重要和实用。

学习与指导意义

Babel 7.0 在自定义 polyfill 、支持新特性的插件系统及编译速度等方面有了较大的改进。在实际使用的时候需要注意以下几个问题：

Babel 7.0 中预置的 Polyfill 发生了变化，使用 @babel/polyfill 代替 core-js。同时，新版本引入了自定义 Polyfill 功能，可以更加细致地按需使用对应的 Polyfill 。
在 Babel 7.0 中，允许只安装完整的 preset 或者只安装局部的插件。这允许开发者更加灵活地处理插件的包管理。在使用插件之前，需要先了解其对应环境及兼容性，避免不必要的报错。
Babel 7.0 同时引入新的 ECMAScript 新特性的插件，允许兼容更多的语法和运算符。在使用新功能的同时，需要先有实际的使用和情景，并提前了解和学习新语法的兼容版本和使用方法。

总之，Babel 7.0 的发布意味着一次全面的升级和改进，能让 JavaScript 开发更加具有灵活性和扩展性，在项目开发中会带来更好的效果。同时，对于所有前端开发者而言，升级到 Babel 7.0 这一新版本也是必不可少的，因为新版本针对之前各个版本的问题和缺陷，有了更多的优化和改进。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d5ce6da941bf7134b10d0a

Babel 7.0 发布，新特性解析

自定义 Polyfill

支持 ECMAScript 及新特性的更好插件系统

更快的编译速度

学习与指导意义

接着读