babel 7 简单升级指南

babel 7

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

主要改动参考 官方博客

官方升级指南

主要升级内容

• 再也不支持放弃维护的 node 版本 0.十、0.十二、四、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"
复制代码