The blog from sansazhang

babel6.x踩坑与总结

babel6.x的主要变化

babel6.x做了模块化,把所有转换器都被分离出去以插件的形式存在,需要单独安装插件包. 意味着默认情况下babel不会对文件做任何转换.你需要:

安装插件
npm install babel-plugin-transform-es2015-arrow-functions
配置你的.babelrc

{
  "plugins": ["transform-es2015-arrow-functions"]
}

浏览babel6的所有插件
不用担心你需要在配置文件中指定和维护大量的转换器信息,你可以在babel6中预设插件,可以将一组类似的插件打包使用.

安装预设插件
npm install --save-dev babel-preset-es2015
.babelrc

{
  “presets”: [“es2015”]
}

这样可以使用ES2015的所有语法
浏览babel6的所有预设插件

babel6.x升级过程遇到的问题

fis3 + babel6.x

插件升级: fis-parse-babel-5.x -> fis-parse-babel-6.x;
npm install --save-dev fis-parse-babel-6.x
修改配置:
fis-conf.js

parser: fis.plugin('babel-6.x', {
        sourceMaps: true,
})

.babelrc

{
    "presets": ["es2015","react","stage-0"],
    "plugins": ["transform-decorators-legacy"],
}

本以为已经完事了,结果fis release 不能正确编译:
不能识别es7装饰器语法,找不到transform-decorators-legacy插件;在fis-parse-babel-6.x项目的issues下找到解决方案,删除插件fis-parse-babel-6.x里的 conf.filename = file.subpath; 即可正常编译.

babel6 ES6 module to AMD的转码逻辑变更:

module源码:

let demo = {};
demo.foo=function(){};
export default demo;

babel5编译的结果:

define("module",function(require,exports,module){
  "use strict";
  Object.defineProperty(t,"__esModule",{value:!0});
  var demo={};
  demo.foo=function(){};
  exports["default"]=demo;
  module.exports=exports["default"];
});

babel6编译的结果:

define("module",function(require,exports){
  "use strict";
  Object.defineProperty(t,"__esModule",{value:!0});
  var demo={};
  demo.foo=function(){};
  exports.default=demo;
});

babel6的结果少了一句 module.exports=exports["default"] 不再将结果放置在module.exports中,因此export default模块的引入使用require必须指明.default; 使用import不能使用解构形式引入:

var a = require('module'); // ×
var a = require('module').default; // √
a.foo();

import {a} from 'module'; // ×
import a from 'module'; // √
a.foo();

可以使用插件babel-plugin-add-module-exports来兼容不正确的代码.

sansazhang / blog Goto Github PK

blog's People

Contributors

Watchers

blog's Issues

babel6.x踩坑与总结

babel6.x的主要变化

babel6.x升级过程遇到的问题

fis3 + babel6.x

babel6 ES6 module to AMD的转码逻辑变更:

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent