升级到 Babel 7 不完全指南

这篇文章用于那些想要升级到 Babel7 的用户。

并不是每一处的改动都会影响你的项目，所以我们基于升级时可能对你的项目造成的破坏程度，对所有的改动做了一个排序。

针对所有 Babel

不再支持 Node.js 0.10, 0.12, 4 和 5。可参考：#[5025]，#[5041]，#[7755]。

移除年度预设用法

带有"env"的预设已经发布了一年多，现在它会完全取代以下所有用法：

babel-preset-es2015
babel-preset-es2016
babel-preset-es2017
babel-preset-latest

移除 state 预设用法

详细的升级文档可参考：https://github.com/babel/babel/tree/master/packages/babel-preset-stage-0#babelpreset-stage-0。

或者是直接执行npx babel-upgrade可自动进行升级。

移除了@babel/polyfill中的提议

...

包重命名

babylon现在重命名为@babel/parser

在配置文件中，你仍然可以使用包名称的简写形式，但建议你能够用更清晰的全名称。

包命名空间

最重要的一个改动就是给所有的包加了命名空间。这样可以减少很多意外的或者故意的命名问题，可以与社区里的其它插件有一个清晰的区分，形成一个简单的命名规范。

你的依赖可能像下面这样改动一下即可：

babel-cli -> @babel/cli

把 TC39 提议都换成`-propoal`

把那些非年度预设的 TC39 插件中的-transform都换成了-propoal，这样可以更好的区分出一个提议是否为 javascript 官方的。例如：

@babel/plugin-transform-function-bind换成了@babel/plugin-proposal-function-bind
@babel/plugin-transform-class-properties换成了@babel/plugin-proposal-class-properties

移除包名称中的年份

一些插件还带有没必要的-es3-或者-es2015等字符。所以，它们做了如下改动：

@babel/plugin-transform-es2015-classes换成了@babel/plugin-transform-classes

在 CommonJS 中使用`"use strict"`和`this`

...

分离 React 和 Flow 之间的预设

...

解析选项

现在 Babel 的配置选项会比以前的 Babel6 更加严格。像这样的一个逗号分隔列表："presets": "es2015, es2016"在以前的版本中可以运行，今后都要改成数组才可以。但是这个对 CLI 不受影响，它依然可以使用逗号分隔的字符串。

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

插件/预设的暴露

今后所有的插件和预设向外暴露的都必须是一个函数，而不能是一个对象，这可以帮助我们进行缓存。

解析字符串配置值

...

基于路径的`only`和`ignore`模式

语法支持

@babel/plugin-proposal-object-rest-spread

对象 Rest 属性和 Spread 属性

Rest 属性：

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

Spread 属性：

let n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }

@babel/plugin-proposal-unicode-property-regex

@babel/plugin-proposal-json-strings

@babel/plugin-transform-new-target

function Foo() {
  console.log(new.target);
}

Foo(); // => undefined
new Foo(); // => Foo

@babel/plugin-proposal-class-properties

class Bork {
  //Property initializer syntax
  instanceProperty = "bork";
  boundFunction = () => {
    return this.instanceProperty;
  };

  //Static class properties
  static staticProperty = "babelIsCool";
  static staticFunction = function() {
    return Bork.staticProperty;
  };
}

let myBork = new Bork;

//Property initializers are not on the prototype.
console.log(myBork.__proto__.boundFunction); // > undefined

//Bound functions are bound to the class instance.
console.log(myBork.boundFunction.call(undefined)); // > "bork"

//Static function exists on the class.
console.log(Bork.staticFunction()); // > "babelIsCool"

@babel/plugin-proposal-optional-catch-binding

try {
  throw 0;
} catch {
  doSomethingWhichDoesntCareAboutTheValueThrown();
}

Babel CLI 命令

...

chenxiaochun / blog