随着越来越多的库升级至 babel6,将项目升级至 babel6 迫在眉睫。在这里总结将 项目升级至 babel6 的过程中遇到的问题,供大家参考。
babel 分离为多个包
babel-cli 命令行
babel-core node api 以及 require hook
babel-polyfill 提供es2015的环境
preset 机制
babel6 默认不再默认支持 es2015 以及 react。 需要手动在 .babelrc 中添加presets。
所谓的 presets 其实就是一些同类plugin打包的结果,方便进行添加。
{
"presets": ["es2015", "react"]
}
preset 是需要从 npm 中安装的。
npm install babel-preset-es2015 babel-preset-react --save-dev
stage 不再是配置项,以 presets 的形式添加。
npm install babel-preset-stage-0 --save-dev
export default 编译结果变化
源码
import a from 'a';
export default a;
babel5 编译后的结果
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _a = require('a');
var _a2 = _interopRequireDefault(_a);
exports['default'] = _a2['default'];
module.exports = exports['default'];
babel6 编译后的结果
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _a = require('a');
var _a2 = _interopRequireDefault(_a);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _a2.default;
可以发现babel6
对 export default
的编译结果发生了变化,少了这句代码module.exports = exports['default'];
,不再将结果放置在 module.exports
中。
因此 export default
的模块不再能通过 require
来引用了,只能通过 import
引入。并且不能通过解构的形式来引入 export defaut
的模块。
可能碰到的问题
require es6 模块产生bug
example
// 文件 a.js
const a = 1;
export default a;
// 文件 b.js
var a = require('./a.js');
编译后执行会产生 bug, 因为 a.default 才是需要的模块的对象。
可以通过以下方式来调用。
var a = require('module').default;
无论是 export default
还是 moudle.exports
的模块都能通过 import
引入,因此还是尽量通过 import
来引入模块吧!
解构方式引入模块
example
// 文件 a.js
export default {
a: 1,
b: 2
}
// 文件 b.js
import { a, b } from 'a.js'
使用 babel6 进行编译后执行会报错, 原因同上,导出的 object 其实是放在 default 属性中的。
修改方法:
// 文件 a.js
export const a = 1; // 导出变量
// 导出方法
export function b() {
}
// 文件 b.js
import { a, b } from 'a.js'
或者
// 文件 a.js
export default {
a: 1,
b: 2
}
// 文件 b.js
import obj from 'a.js';
const { a, b } = obj;
结语
目前只发现了这些坑,目前项目已经迁移至 babel6
正常运行了一段时间,没有发现新的问题了。 欢迎大家补充~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。