babel5升级到babel6总结

babel5 to babel6

为什么要升级?

  • 性能提升:据说compile速度提升20%(但在测试后发现,速度慢了20%+)。
  • 可配置的插件:更强的灵活性,以及更简单的插件API。
  • 更简洁的配置。

重大变化

  • 不再提供babel包
    • 命令行工具由babel-cli包提供
    • node api由babel-core提供
    • polyfill由babel-polyfill提供
  • .babelrc配置变化
    • 移除“blacklist”、“whitelist”、“optional”、“nonStandard”和“modules”等
    • 增加plugins:转码逻辑通过一系列插件实现,默认不使用任何插件
    • 增加presets配置,提供一些预设的插件集合
    • external-helper选项由插件实现

项目升级过程中遇到问题

babel官方未提供decorator transfrom插件

decorator是es7的提案,如果要是用的话,需要用用非官方插件:transform-decorators-legacy。

babel提供的es2015插件集默认包含transform-es2015-modules-commonjs插件

项目系统需要将es6模块转成AMD模块,需要在plugins中指定使用transform-es2015-modules-amd.

babel提供的AMD模块转码插件默认开启strict mode

关闭strict mode的方法:

  • 不使用preset-es2015,需要自定义preset或者在plugins中引入所有需要的插件;
  • 插件中做如下配置:
{
    "plugins": [
        ["transform-es2015-modules-amd", {"strict": false}]
    ]
}

Notes:如果不提供es2015相关插件的preset,preset-stage-x也不能使用
备注下:preset是一系列plugin 的集合,而stage-x代表着支持es6哪个阶段的语法。

  • stage-0 - Strawman: just an idea, possible Babel plugin.
  • stage-1 - Proposal: this is worth working on.
  • stage-2 - Draft: initial spec.
  • stage-3 - Candidate: complete spec and initial browser implementations.
  • stage-4 - Finished: will be added to the next yearly release.

es6代码中有require时会导致转码失败

es6代码中出现require时,babel5能正确转码,但babel6会报如下错误:

Property object of MemberExpression expected node to be of a type ["Expression"] but instead got null.

解决方法:讲require变更为import

windows7下会出现Couldn’t find preset

当安装babel插件的是时候,在windows7环境上不能使用如下命令来安装,会报”Couldn’t find preset “es2015” relative to directory”。

npm install --save-dev babel-preset-es2015

解决方法:升级node版本至5+,npm3+或者安装preset安装的时候,使用

npm install --save babel-preset-es2015

原因是不同的操作系统cache策略不同。

Cache files are stored in ~/.npm on Posix, or ~/npm-cache on Windows.
This is controlled by the cache configuration param.

使用babel-core提供的api转码时,如果以对象形式传入配置,转码后AMD模块会有两层define

解决方法:传入配置中需要增加babelrc=false

原因是:构建过程中,babel自身会去基于.babelrc来进行构建,如果我们不想让babel执行这个文件需要在调试的时候将babelrc设置为false,在构建的时候还是需要使用默认的true来调用和执行。

ES6 module to AMD的转码逻辑变更

babel6提供的AMD转码插件对export default的转码逻辑做了修改,详情如下:
针对如下代码:

export default {
    foo: 1
};

使用babel5转码后:

define(["exports", "module"], function (exports, module) {
    module.exports = {
        foo: 1
    };;
});

使用babel6转码后:

define(["exports"], function (exports) {
    Object.defineProperty(exports, "__esModule", {
        value: true
    });
    exports.default = {
        foo: 1
    };
});

在AMD模块依赖es6模块的场景下,AMD模块代码会不能运行。

备注:
主要的大坑就是项目里面既有es5的代码也有es6的代码,然后在5里面require es6文件就会出问题,会多一层未经处理的default….解决核心就是把这层default给干掉。

结论

升级最大的阻碍是:ES6 module to AMD的转码逻辑变更并且暂时没有什么好的办法解决这个问题,所以暂不升级。

IoC支持插件后,可以考虑实施方法2解决模块转码问题,相比方法1代价更小。

总体来说方法3代价最小,但babel5的转码存在问题是:导致不符合es6模块使用规范的代码出现。如下:

// foo.js
const foo = {baz: 42, bar: false}
export default foo
// bar.js
import {baz} from './foo'

项目可用的BABEL6 转码配置

不考虑ES6 module to AMD的转码逻辑变更问题,通过一下配置可以在项目中使用babel6

.babelrc

{
    "compact": false,
    "ast": false,
    "sourceMaps": "inline",
    "highlightCode": true,
    "plugins": [
        ["transform-es2015-modules-amd", {"strict": false}],
        "transform-decorators-legacy"
    ],
    "presets": ["es2015", "stage-0", "stage-3"],
    "ignore": [
        "biz/report/**",
        "dsp-base/**/biz/tool/keywords/**"
    ]
}

package.json

"dependencies": {
    "babel-plugin-transform-decorators-legacy": "^1.3.4"
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-stage-0": "^6.5.0"
  }

你可能感兴趣的:(解决方案,学习笔记)