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"