最新的nodejs v7版本已經(jīng)支持大部分es6語法了，但總有那么幾個漏網(wǎng)之魚讓人不省心砾赔，webstorm作為爽的飛起的ide兽掰，擼起JavaScript代碼那是又好又快队他。本文就總結(jié)兩種配置babel自動轉(zhuǎn)譯es6到es5的方法。
第一種：簡單粗暴型寞蚌，所有語法轉(zhuǎn)譯成es5
- npm安裝babel
npm install -g babel-cli
2.npm安裝Babel的preset
npm install --save-dev babel-preset-es2015
3 工程路徑新建.babelrc文件田巴，內(nèi)容如下
{
"presets": [
"es2015"
]
}
4 打開Preference->Tools->File Watcher->Babel,
如何沒有，就點擊下面+號挟秤，選擇新建
5 雙擊打開Babel壹哺，進行配置
重點是Watcher Seetings參數(shù)：
- Arguments:
--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$
6 這樣就完成了自動轉(zhuǎn)換js的配置，新建aa.js文件測試艘刚，如下圖,自動生成aa-compiled.js文件管宵，這個文件就是轉(zhuǎn)譯后的文件：
轉(zhuǎn)換效果如何呢？
aa.js內(nèi)容
export default class A{
constructor(){
this.aa = 1;
this.bb = 2;
}
test(){
}
}
aa-compiled.js內(nèi)容：
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* Created by cly on 2017/4/26.
*/
var A = function () {
function A() {
_classCallCheck(this, A);
this.aa = 1;
this.bb = 2;
}
_createClass(A, [{
key: "test",
value: function test() {}
}]);
return A;
}();
exports.default = A;
//# sourceMappingURL=aa-compiled.js.map
第二種：精細劃分型攀甚，僅僅把不支持import,export的語法進行es5轉(zhuǎn)譯
第一種轉(zhuǎn)譯我們會發(fā)現(xiàn)一個問題箩朴，就是所有語法全變成了es5,調(diào)試時還得在es6，es5之間切換秋度，簡直要精神分裂了呀炸庞，有木有！這樣我們直接用es5寫不就好了嗎荚斯！
有沒有方法埠居，只轉(zhuǎn)譯nodejs現(xiàn)在不支持的語法呢，據(jù)我所知事期，最新版node.js的v7.8版本拐格，除了export,import這些module依賴以外的語法，都完美支持了es6刑赶，將來v8,v9妥妥的完美兼容的節(jié)奏捏浊。那我們是不是只引入module依賴模塊的轉(zhuǎn)譯規(guī)則，是不是就搞定問題了撞叨？
查看babel官網(wǎng),可以找到如下圖
點擊進入就是只安裝common js插件的方法
1 npm安裝
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs
2 修改.babelrc文件金踪，改為如下：
// without options
{
"plugins": ["transform-es2015-modules-commonjs"]
}
//或者
//with options
{
"plugins": [
["transform-es2015-modules-commonjs", {
"allowTopLevelThis": true
}]
]
}
2 修改打開Preference->Tools->File Watcher->Babel,修改Arguments參數(shù)的
--presets es2015 為 -- plugins transform-es2015-modules-commonjs
3 新建bb.js測試浊洞，跟aa.js的結(jié)構(gòu)一樣。
bb.js內(nèi)容
export default class B{
constructor(){
this.aa = 1;
this.bb = 2;
}
test(){
}
}
轉(zhuǎn)譯后的bb-compiled.js內(nèi)容
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* Created by cly on 2017/4/26.
*/
class B {
constructor() {
this.aa = 1;
this.bb = 2;
}
test() {}
}
exports.default = B;
//# sourceMappingURL=bb-compiled.js.map
是不是很簡單胡岔，快嘗試一下吧法希！
參考文獻
WebStorm配置Babel編譯環(huán)境
[nodejs v6+ 不兼容 ES6 import/export 優(yōu)雅解決方法]
