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。它的取值可以是 amdumdsystemjscommonjs 和 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 的配置 (pluginspresets) 也要这么写,为了保持一致。例如

{
"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 的通配符转化等等。

babel 7 简单升级指南的更多相关文章

  1. NetModular 新年第一更以及升级指南(打造简单易用的.Net Core模块化快速开发框架~)

    先给大家拜个晚年,祝大家身体健康,远离肺炎~ NetModular开源已有一年,在这一年收到了很多建议,框架也变得越来越完善.这次更新包括了从去年年尾到现在所做的更改,感觉更改的内容还是蛮多的,所以记 ...

  2. Webpack2 升级指南和特性摘要(转)

    Webpack2 升级指南和特性摘要 resolve.root, resolve.fallback, resolve.modulesDirectories 上述三个选项将被合并为一个标准配置项:res ...

  3. 企业IT管理员IE11升级指南【17】—— F12 开发者工具

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  4. 企业IT管理员IE11升级指南【15】—— 代理自动配置脚本

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  5. 企业IT管理员IE11升级指南【7】—— Win7和Win8.1上的IE11功能对比

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  6. 企业IT管理员IE11升级指南【8】—— Win7 IE8和Win7 IE11对比

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  7. 企业IT管理员IE11升级指南【9】—— IE10与IE11的功能对比

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  8. 企业IT管理员IE11升级指南【13】—— 如何把IEMP迁移到GPP

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  9. 企业IT管理员IE11升级指南【14】—— IE11代理服务器配置

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

随机推荐

  1. 用delphi制作无界面的activex控件

    首先,您要了解: •COM的基本原理 •能被网页调用的非可视ActiveX控件必须是一种至少实现了IOleObject接口的TAutoObject组件 •利用Delphi向导生成的ActiveX控件必 ...

  2. maven学习二(dependencies)

    在前面一篇文章maven学习一(HelloWorld工程)已经对maven有了基本介绍,本文开始介绍maven依赖,通过如何如何增加log4j来学习maven的dependencies no-depe ...

  3. webservice接口与HTTP接口学习笔记

    一.webservice 的概念 Web 是使应用程序可以与平台和编程语言无关的方式进行相互通信的一项技术.Web 服务是一个软件接口,它描述了一组可以在网络上通过标准化的 XML 消息传递访问的操作 ...

  4. escape()、encodeURI()、encodeURIComponent()区别详解 (转)

    JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:,decodeURI,decodeURIComp ...

  5. MySQL实用工具汇总

    本文收录了mysql相关的实用工具.工具包括:性能测试,状态分析,SQL路由,及运维开发相关的所有工具,并会持续更新. 1.工具套件集 - percona-toolkit - oak-toolkit ...

  6. Java 之外,是 Scala 还是 Groovy?【转载】

    原文地址 Scala 和 Groovy 都是基于 JVM 的语言,相比 Java,它们都有语法更加简明和表达能力更丰富.对于那些既想不脱离开 JVM 又想避免 Java 繁琐语句的开发人员来说,Sca ...

  7. XMR恶意挖矿脚本处理笔记

    一.登录 攻击者如何登录系统未能查出,所有日志已被清除.为防万一,把系统中没用的用户都删掉并修改其他用户密码. 二.被攻击后的表象 1.服务器资源被大量占用,资源占用率飙升: 2.服务器所有JS文件被 ...

  8. grid - 它和flex布局有何区别?

    Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定.调整和分布一个容器里的项目布局(基于一维),即使他们的大小是未知或者是动态的.(这里我们称为Flex). Flex布局 ...

  9. Sequel Pro for Mac(MySQL 数据库管理工具)破解版安装

    1.软件简介    Sequel Pro 是一款管理 Mysql 的工具,界面简洁易用. 2.功能特色 FULL MYSQL SUPPORT Sequel Pro is a fast, easy-to ...

  10. OpenCV 学习笔记 04 深度估计与分割

    本章节主要是使用深度摄像头的数据来识别前景区和背景区,这样就可以分别对前景和背景做不同的处理. 1 创建模块