babel 7 简单升级指南

babel 7

babel 7 发布两天了，试着对当前项目更新了下，仅此记录分享

主要改动参考 官方博客

官方升级指南

主要升级内容

• 不再支持放弃维护的 node 版本 0.10、0.12、4、5
• 使用 @babel 命名空间，如 @babel/core
• @babel/preset-env 代替 preset-es2015 等
• TC39 提议的插件改名为 -proposal，代替 -transform
• 针对面向用户的包（如 babel-loader、@babel/cli）在 @babel/core 中引入 peerDependency

新增 babel.config.js

• 可按运行环境配置 babel 配置
• 解析方式不同于 .babelrc，不会向上查找
• 可用 overrides 进行选择性配置

主要新增语法

• BigInt
• 动态导入
• 可选链接 ( a?.b )
• 逻辑赋值 ( a &&= b ; a ||= b )

let a = {b: 11}
a?.b  // a ? a.b : undefined

a &&= b // a = a && (a=b) 或 a = a && b
复制代码

• ( a ?? b )
• 管道操作符 ( a |> b )

let c = a ?? b // 只有 a 是 undefined 或 null 时，c 等于 b

let res = foo(boo(aaa('nice')))
===  
let res = 'nice' |> aaa |> boo |> foo
复制代码

• 使用 @babel/preset-typescript 支持 TypeScript

polyfill 修改

• import “@babel/polyfill” 导入整个 polyfill
• 可以使用配置选项 useBuiltIns: “entry” 按需导入
• 可以使用 useBuiltIns: “usage” 自动按使用到的 polyfill导入

其他修改

• babel-upgrade 自动升级工具
• 速度提升、代码优化
• 添加注解，方便 Uglify 等插件移除无用代码
• 新增一些 TC39 提案语法
• @babel/runtime 变化
• Babel 宏配置
• 模块模式配置支持
• 支持扩展原生内置元素 （Array、Error 等）

升级

babel 升级工具修改配置

npx babel-upgrade --write

# 或是安裝 babel-upgrade 在 global 並執行
npm install babel-upgrade -g
babel-upgrade --write
复制代码

可以看到 package.json 中移除了旧版本的依赖，自动新增了新版名称，.babelrc 文件的配置也会自动修改 但是不会删除已有的插件，如原来的 transform-decorators-legacy

// 移除就版本依赖后重新安装依赖

rm -rf node_modules
yarn install
复制代码

修改所有 bable-polyfill 为 @babel/polyfill

因为 babel 7 新增的 @babel 命名空间，所以原来的 babel-polyfill 需要修改名称

// index.js 头部导入修改
import '@babel/polyfill'

// webpack config 入口修改
entry: ['@babel/polyfill', './src/index.js'],
复制代码

装饰器插件

yarn add @babel/plugin-proposal-decorators -D

复制代码

注意

• @babel/plugin-proposal-decorators 必须在 @babel/plugin-proposal-class-properties 之前配置
• 装饰器插件新增的 legacy 配置

升级后的 .babelrc

 "dev": {
      "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/transform-async-to-generator",
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ],
        ["@babel/plugin-proposal-class-properties", { "loose": true }],
        "@babel/plugin-proposal-optional-chaining",
        "react-hot-loader/babel",
        [
          "react-css-modules",
          {
            "webpackHotModuleReloading": true,
            "generateScopedName": "[path][name]__[local]--[hash:base64:5]",
            "filetypes": {
              ".less": {
                "syntax": "postcss-less"
              }
            }
          }
        ],
        [
          "import",
          {
            "libraryName": "antd"
          }
        ]
      ]
    },

复制代码

其他插件

    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-do-expressions",
    "@babel/plugin-proposal-function-bind"

preset

比如 es2015 是一套规范，包含大概十几二十个转译插件。如果每次要开发者一个个添加并安装，配置文件很长不说，npm install 的时间也会很长，更不谈我们可能还要同时使用其他规范呢。

为了解决这个问题，babel 还提供了一组插件的集合。因为常用，所以不必重复定义 & 安装。(单点和套餐的差别，套餐省下了巨多的时间和配置的精力)

preset 分为以下几种：

• 官方内容，目前包括 env, react, flow, minify 等。这里最重要的是 env，后面会详细介绍。
• stage-x，这里面包含的都是当年最新规范的草案，每年更新。
  这里面还细分为
• Stage 0 - 稻草人: 只是一个想法，经过 TC39 成员提出即可。
• Stage 1 - 提案: 初步尝试。
• Stage 2 - 初稿: 完成初步规范。
• Stage 3 - 候选: 完成规范和浏览器初步实现。
• Stage 4 - 完成: 将被添加到下一年度发布。

例如 syntax-dynamic-import 就是 stage-2 的内容，transform-object-rest-spread 就是 stage-3 的内容。
此外，低一级的 stage 会包含所有高级 stage 的内容，例如 stage-1 会包含 stage-2, stage-3 的所有内容。
stage-4 在下一年更新会直接放到 env 中，所以没有单独的 stage-4 可供使用。

• es201x, latest
  这些是已经纳入到标准规范的语法。例如 es2015 包含 arrow-functions，es2017 包含 syntax-trailing-function-commas。但因为 env 的出现，使得 es2016 和 es2017 都已经废弃。所以我们经常可以看到 es2015 被单独列出来，但极少看到其他两个。
  latest 是 env 的雏形，它是一个每年更新的 preset，目的是包含所有 es201x。但也是因为更加灵活的 env 的出现，已经废弃。

执行顺序

很简单的几条原则：

• Plugin 会运行在 Preset 之前。
• Plugin 会从前到后顺序执行。
• Preset 的顺序则 刚好相反(从后向前)。

preset 的逆向顺序主要是为了保证向后兼容，因为大多数用户的编写顺序是 ['es2015', 'stage-0']。这样必须先执行 stage-0 才能确保 babel 不报错。因此我们编排 preset 的时候，也要注意顺序，其实只要按照规范的时间顺序列出即可。

插件和 preset 的配置项

简略情况下，插件和 preset 只要列出字符串格式的名字即可。但如果某个 preset 或者插件需要一些配置项(或者说参数)，就需要把自己先变成数组。第一个元素依然是字符串，表示自己的名字；第二个元素是一个对象，即配置对象。

最需要配置的当属 env，如下：

"presets": [
    // 带了配置项，自己变成数组
    [
        // 第一个元素依然是名字
        "env",
        // 第二个元素是对象，列出配置项
        {
          "module": false
        }
    ],

    // 不带配置项，直接列出名字
    "stage-2"
]

env (重点)

因为 env 最为常用也最重要，所以我们有必要重点关注。

env 的核心目的是通过配置得知目标环境的特点，然后只做必要的转换。例如目标浏览器支持 es2015，那么 es2015 这个 preset 其实是不需要的，于是代码就可以小一点(一般转化后的代码总是更长)，构建时间也可以缩短一些。

如果不写任何配置项，env 等价于 latest，也等价于 es2015 + es2016 + es2017 三个相加(不包含 stage-x 中的插件)。env 包含的插件列表维护在这里

下面列出几种比较常用的配置方法：

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

如上配置将考虑所有浏览器的最新2个版本(safari大于等于7.0的版本)的特性，将必要的代码进行转换。而这些版本已有的功能就不进行转化了。这里的语法可以参考 browserslist

{
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10"
      }
    }]
  ]
}

如上配置将目标设置为 nodejs，并且支持 6.10 及以上的版本。也可以使用 node: 'current' 来支持最新稳定版本。例如箭头函数在 nodejs 6 及以上将不被转化，但如果是 nodejs 0.12 就会被转化了。

另外一个有用的配置项是 modules。它的取值可以是 amd, umd, systemjs, commonjs 和 false。这可以让 babel 以特定的模块化格式来输出代码。如果选择 false 就不进行模块化处理。

npm package 名称的变化 (重点)

这是 babel 7 的一个重大变化，把所有 babel-* 重命名为 @babel/*，例如：

1. babel-cli 变成了 @babel/cli。
2. babel-preset-env 变成了 @babel/preset-env。进一步，还可以省略 preset 而简写为 @babel/env。
3. babel-plugin-transform-arrow-functions 变成了 @babel/plugin-transform-arrow-functions。和 preset 一样，plugin 也可以省略，于是简写为 @babel/transform-arrow-functions。

这个变化不单单应用于 package.json 的依赖中，包括 .babelrc 的配置 (plugins, presets) 也要这么写，为了保持一致。例如

{
  "presets": [
-   "env"
+   "@babel/preset-env"
  ]
}

顺带提一句，上面提过的 babel 解析语法的内核 babylon 现在重命名为 @babel/parser，看起来是被收编了。

上文提过的 stage-x 被删除了，它包含的插件虽然保留，但也被重命名了。babel 团队希望更明显地区分已经位于规范中的插件 (如 es2015 的 babel-plugin-transform-arrow-functions) 和仅仅位于草案中的插件 (如 stage-0 的 @babel/plugin-proposal-function-bind)。方式就是在名字中增加 proposal，所有包含在 stage-x 的转译插件都使用了这个前缀，语法插件不在其列。

最后，如果插件名称中包含了规范名称 (-es2015-, -es3- 之类的)，一律删除。例如 babel-plugin-transform-es2015-classes 变成了 @babel/plugin-transform-classes。(这个插件我自己没有单独用过，惭愧)

不再支持低版本 node

babel 7.0 开始不再支持 nodejs 0.10, 0.12, 4, 5 这四个版本，相当于要求 nodejs >= 6 (当前 nodejs LTS 是 8，要求也不算太过分吧)。

这里的不再支持，指的是在这些低版本 node 环境中不能使用 babel 转译代码，但 babel 转译后的代码依然能在这些环境上运行，这点不要混淆。

only 和 ignore 匹配规则的变化

在 babel 6 时，ignore 选项如果包含 *.foo.js，实际上的含义 (转化为 glob) 是 ./**/*.foo.js，也就是当前目录 包括子目录 的所有 foo.js 结尾的文件。这可能和开发者常规的认识有悖。

于是在 babel 7，相同的表达式 *.foo.js 只作用于当前目录，不作用于子目录。如果依然想作用于子目录的，就要按照 glob 的完整规范书写为 ./**/*.foo.js 才可以。only 也是相同。

这个规则变化只作用于通配符，不作用于路径。所以 node_modules 依然包含所有它的子目录，而不单单只有一层。(否则全世界开发者都要爆炸)

@babel/node 从 @babel/cli 中独立了

和 babel 6 不同，如果要使用 @babel/node，就必须单独安装，并添加到依赖中。

babel-upgrade

在提到删除 stage-x 时候提过这个工具，它的目的是帮助用户自动化地从 babel 6 升级到 7。

这款升级工具的功能包括：(这里并不列出完整列表，只列出比较重要和常用的内容)

1. package.json
2. 把依赖(和开发依赖)中所有的 babel-* 替换为 @babel/*
3. 把这些 @babel/* 依赖的版本更新为最新版 (例如 ^7.0.0)
4. 如果 scripts 中有使用 babel-node，自动添加 @babel/node 为开发依赖
5. 如果有 babel 配置项，检查其中的 plugins 和 presets，把短名 (env) 替换为完整的名字 (@babel/preset-env)
6. .babelrc
7. 检查其中的 plugins 和 presets，把短名 (env) 替换为完整的名字 (@babel/preset-env)
8. 检查是否包含 preset-stage-x，如有替换为对应的插件并添加到 plugins

使用方式如下：

# 不安装到本地而是直接运行命令，npm 的新功能
npx babel-upgrade --write

# 或者常规方式
npm i babel-upgrade -g
babel-upgrade --write

babel-upgrade 工具本身也还在开发中，还列出了许多 TODO 没有完成，因此之后的功能可能会更加丰富，例如上面提过的 ignore 的通配符转化等等。