babel6 升級總結

隨着愈來愈多的庫升級至 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 正常運行了一段時間，沒有發現新的問題了。 歡迎你們補充~