babel6 升级总结
jopen
9年前
随着越来越多的库升级至 babel6，将项目升级至 babel6 迫在眉睫。在这里总结将 poiop 升级至 babel6 的过程中遇到的问题，供大家参考。
babel 分离为多个包
preset 机制
babel6 默认不再默认支持 es2015 以及 react。 需要手动在 .babelrc 中添加presets。
{ "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 的编译结果发生了变化，少了这句代码 exports['default'] = _a2['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 正常运行了一段时间，没有发现新的问题了。 欢迎大家补充~
</div>