隨著越來(lái)越多的庫(kù)升級(jí)至 babel6，將項(xiàng)目升級(jí)至 babel6 迫在眉睫。在這里總結(jié)將 項(xiàng)目升級(jí)至 babel6 的過(guò)程中遇到的問(wèn)題，供大家參考。

babel 分離為多個(gè)包

babel-cli 命令行
babel-core node api 以及 require hook
babel-polyfill 提供es2015的環(huán)境

preset 機(jī)制

babel6 默認(rèn)不再默認(rèn)支持 es2015 以及 react。 需要手動(dòng)在 .babelrc 中添加presets。
所謂的 presets 其實(shí)就是一些同類plugin打包的結(jié)果，方便進(jìn)行添加。

{
  "presets": ["es2015", "react"]
}

preset 是需要從 npm 中安裝的。

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

stage 不再是配置項(xiàng)，以 presets 的形式添加。

npm install babel-preset-stage-0 --save-dev

export default 編譯結(jié)果變化

源碼

import a from 'a';
export default a;

babel5 編譯后的結(jié)果

'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 編譯后的結(jié)果

'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;

可以發(fā)現(xiàn)babel6對(duì) export default 的編譯結(jié)果發(fā)生了變化，少了這句代碼module.exports = exports['default'];，不再將結(jié)果放置在 module.exports 中。
因此 export default 的模塊不再能通過(guò) require 來(lái)引用了，只能通過(guò) import 引入。并且不能通過(guò)解構(gòu)的形式來(lái)引入 export defaut 的模塊。

可能碰到的問(wèn)題

require es6 模塊產(chǎn)生bug

example

// 文件 a.js
const a = 1;
export default a;
 
// 文件 b.js
var a = require('./a.js');

編譯后執(zhí)行會(huì)產(chǎn)生 bug， 因?yàn)?a.default 才是需要的模塊的對(duì)象。
可以通過(guò)以下方式來(lái)調(diào)用。

var a = require('module').default；

無(wú)論是 export default 還是 moudle.exports 的模塊都能通過(guò) import 引入，因此還是盡量通過(guò) import 來(lái)引入模塊吧！

解構(gòu)方式引入模塊

example

// 文件 a.js
export default {
    a: 1,
    b: 2
}
 
// 文件 b.js
import { a, b } from 'a.js'

使用 babel6 進(jìn)行編譯后執(zhí)行會(huì)報(bào)錯(cuò)， 原因同上，導(dǎo)出的 object 其實(shí)是放在 default 屬性中的。

修改方法:

// 文件 a.js
export const a = 1;  // 導(dǎo)出變量
// 導(dǎo)出方法
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;

結(jié)語(yǔ)

目前只發(fā)現(xiàn)了這些坑，目前項(xiàng)目已經(jīng)遷移至 babel6 正常運(yùn)行了一段時(shí)間，沒(méi)有發(fā)現(xiàn)新的問(wèn)題了。 歡迎大家補(bǔ)充~