Babel7.x 升级指南：坑点 + 好处-FunTeaLearn Online Web Tutorials

Babel 是一个 JavaScript 编译器，可以将新版本的 JavaScript 语法转译成旧版本的 JavaScript 语法，从而让我们可以使用最新的 ECMAScript（简称 ES）规范来编写代码。现在，Babel7.x 已经正式发布了。为了避免我们在升级过程中遇到各种问题，以下是本文为大家整理的 Babel7.x 升级指南。

升级前的准备

升级 Babel7.x 之前需要注意以下几个问题：

Node.js 版本

Babel7.x 对 Node.js 的版本有要求，需要使用 v8.9 及以上版本。

插件和预设

Babel7.x 做了一些改动，其中最大的改动就是，移除了大量的预设。如果你正在使用 Babel6 之前版本中的插件和预设，需要检查插件和预设是否在 Babel7.x 中仍被支持。

配置文件

Babel7.x 默认使用 babel.config.js 文件代替 .babelrc 文件。babel.config.js 的导出方法需要使用 module.exports。

升级过程

1. 安装 Babel7.x

先卸载 Babel6 或更早的版本，然后安装最新版本的 Babel：

$ npm uninstall --save-dev babel-core babel-cli babel-preset-es2015
$ npm install --save-dev @babel/core @babel/cli

我们需要安装 @babel/core 和 @babel/cli 来替代旧的命令行工具。

2. 配置新的 babel.config.js 文件

在项目根目录下创建 babel.config.js 文件：

// www.javascriptcn.com code example
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        node: 'current',
        chrome: '58',
        ie: '11'
      }
    }]
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    // 其他插件
  ]
};

如果你在旧版本中使用了 .babelrc 文件，则需要转换一下：

$ npm install --save-dev babel-upgrade
$ npx babel-upgrade --write

3. 安装插件和预设

许多插件和预设仍然存在于 Babel7.x 中，但其中一些可能需要重新安装或更新。如果您的插件或预设没有与 Babel7.x 兼容，则需要进行更改或寻找替代插件。Babel 官方提供了一个插件搜索网站，可以用来搜索是否有已经适配了 Babel7.x 的插件和预设：https://babeljs.io/docs/en/plugins#plugin-search

例如，我们需要使用 @babel/preset-es2015 预设的话，在 Babel7.x 中可以这样安装：

$ npm install --save-dev @babel/preset-env

4. 使用 @babel/polyfill

在旧版本中，我们使用 babel-preset-es2015 中的 babel-polyfill 软件包来提供现代浏览器不支持的功能。在 Babel7.x 中，官方不再推荐使用该软件包，而是建议使用 @babel/polyfill。我们可以这样安装：

$ npm install --save @babel/polyfill

然后在入口文件中引入：

import '@babel/polyfill';

或者使用以下方式：

const babelPolyfill = require('@babel/polyfill');

5. 使用 @babel/runtime

在旧版本中，我们使用 babel-plugin-transform-runtime 插件来解决代码冗余和全局污染问题。在 Babel7.x 中，我们应该使用 @babel/runtime 软件包。我们可以这样安装：

$ npm install --save @babel/runtime

然后在配置文件中添加插件：

module.exports = {
  plugins: [
    '@babel/plugin-transform-runtime'
  ]
};

6. 更改其他插件和预设

许多插件和预设在 Babel7.x 中被删除，改名或改变默认的行为。如果你在旧版本中使用了这些插件和预设，则需要进行更改。以下是几个例子：

babel-plugin-syntax-trailing-function-commas 插件被移除了。
babel-plugin-transform-es2015-typeof-symbol 插件被 @babel/plugin-transform-typeof-symbol 替代。
babel-preset-es2015 预设被 @babel/preset-env 替代。

Babel7.x 的好处

更快的编译速度

Babel7.x 的编译速度比 Babel6.x 快得多，这是因为 Babel7.x 使用了新的评估器（Parser）和生成器（Generator）。对于大型项目来说，这是一个巨大的优势。

支持更多的功能

Babel7.x 支持 ECMAScript 2018 标准，并支持一些实验性的功能，如 Object.fromEntries、String.prototype.trimStart() 和 String.prototype.trimEnd() 等。

更好的错误提示

Babel7.x 提供了更好的报错机制。错误信息现在会更具体，指向出现错误的位置，从而方便我们更快地定位和解决问题。

结语

Babel7.x 带来了一些改善，需要我们对配置文件和插件进行重新设置。在升级过程中，我们需要特别注意插件和预设的兼容问题，并根据需要进行更改和更新。升级后，我们可以享受更快的编译速度和更好的报错机制，同时还可以使用更多的 ECMAScript 新特性。希望本文对大家有所帮助。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6781a90d935627c900e34fe2

Babel7.x 升级指南：坑点 + 好处