babel import语法 js_webstorm配置babel自动转译es6的两种方法

最新的nodejs v7版本已经支持大部分es6语法了，但总有那么几个漏网之鱼让人不省心，webstorm作为爽的飞起的ide，撸起JavaScript代码那是又好又快。本文就总结两种配置babel自动转译es6到es5的方法。

第一种：简单粗暴型，所有语法转译成es5

npm安装babel

npm install -g babel-cli

2.npm安装Babel的preset

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

3 工程路径新建.babelrc文件，内容如下

{

"presets": [

"es2015"

]

}

4 打开Preference->Tools->File Watcher->Babel,

如何没有，就点击下面+号，选择新建

Paste_Image.png

5 双击打开Babel，进行配置

重点是Watcher Seetings参数：

Arguments:--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$

6 这样就完成了自动转换js的配置，新建aa.js文件测试，如下图,自动生成aa-compiled.js文件，这个文件就是转译后的文件：

Paste_Image.png

转换效果如何呢？aa.js内容

export default class A{

constructor(){

this.aa = 1;

this.bb = 2;

}

test(){

}

}

aa-compiled.js内容：

"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转译

第一种转译我们会发现一个问题，就是所有语法全变成了es5,调试时还得在es6，es5之间切换，简直要精神分裂了呀，有木有！这样我们直接用es5写不就好了吗！

有没有方法，只转译nodejs现在不支持的语法呢，据我所知，最新版node.js的v7.8版本，除了export,import这些module依赖以外的语法，都完美支持了es6，将来v8,v9妥妥的完美兼容的节奏。那我们是不是只引入module依赖模块的转译规则，是不是就搞定问题了？

查看babel官网,可以找到如下图

Paste_Image.png

点击进入就是只安装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参数的

--presets es2015 为 -- plugins transform-es2015-modules-commonjs

3 新建bb.js测试，跟aa.js的结构一样。

bb.js内容

export default class B{

constructor(){

this.aa = 1;

this.bb = 2;

}

test(){

}

}

转译后的bb-compiled.js内容

"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

是不是很简单，快尝试一下吧！

参考文献