最新的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
是不是很简单,快尝试一下吧!
参考文献