webstorm bable
一、设置npm源
1.得到原本的镜像地址
npm get registry
> https://registry.npmjs.org/
设成淘宝的
npm config set registry http://registry.npm.taobao.org/
2.换成原来的
npm config set registry https://registry.npmjs.org/
二、Bable
1.在webstorm中创建项目.
2.在项目的根目录下创建package.json
- {
- "name": "test-project",
- "version": "1.0.0"
- }
3.打开webstorm的Terminal (快捷键alt+f12),安装babel-cli.(需要先安装node.js)
- npm install --save-dev babel-cli
4.File-->Settings-->Languages&Frameworks-->JavaScript JavaScript language version 选择ECMAScript 6.
5.File-->Settings-->Tools-->Files Watchers 中加上Babel
6.将Files Watchers 中 Babel 中的Program 改为$ProjectFileDir$\node_modules\.bin\babel.cmd (windows中)
7.在Terminal中,安装babel的ES6的preset
npm install --save-dev babel-preset-es2015
8.在根目录下新建一个.babelrc文件(就是babel在当前项目的配置文件),我创建的是babel.babelrc
- {
- "presets": [
- "es2015"
- ]
- }
9.ok
备注:我在项目中将Files Watchers 中 Babel 中
File type:JavaScript
更改为
JSX Harmony
Arguments:--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$
更改为
--source-maps --out-file $FileNameWithoutExtension$.js --presets es2015 $FilePath$
Output paths to refresh :$FileNameWithoutExtension$-compiled.js:$FileNameWithoutExtension$-compiled.js.map
更改为
$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map
或者
第一种:简单粗暴型,所有语法转译成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,
如何没有,就点击下面+号,选择新建
![](http://upload-images.jianshu.io/upload_images/4919689-8be8deb3319860b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
5 双击打开Babel,进行配置
重点是Watcher Seetings参数:
- Arguments:
--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$
6 这样就完成了自动转换js的配置,新建aa.js
文件测试,如下图,自动生成aa-compiled.js
文件,这个文件就是转译后的文件:
![](http://upload-images.jianshu.io/upload_images/4919689-68e276c6b1057b92.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
转换效果如何呢?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官网,可以找到如下图
![](http://upload-images.jianshu.io/upload_images/4919689-07934ef927323874.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
点击进入就是只安装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
是不是很简单,快尝试一下吧!
参考文献
WebStorm配置Babel编译环境
[nodejs v6+ 不兼容 ES6 import/export 优雅解决方法]
首先在webstorm的file watcher中添加babel,配置如下:
之后在src目录下建立一个JS文件,报如下错误:
21:13:02 An exception occurred while executing watcher 'Babel'. Watcher has been disabled. Fix it.: Cannot run program "cmd.exe" (in directory "D:\WebStorm_workspace\Study-ES6\src\static"): CreateProcess error=2, 系统找不到指定的文件。
而在命令行进行babel操作都是可以的,如下图:
请问这是为什么?
另外这里还有一个问题,我的babel-preset-es2015和babel-cli都没有进行全局安装(为了可移植性),都是安装在项目根目录下的,这样造成了一个问题,因为要进行命令行操作,我直接在项目目录下是不行的,因为根本就没有babel.cmd这个文件,所以我把node_modules/.bin目录下的babel.cmd文件复制了一份到项目根目录下,并将里面的"%~dp0\..\babel-cli\bin\babel.js" %*
改为了"%~dp0\node_modules\babel-cli\bin\babel.js" %*
,这样才能确保在项目根目录下能执行babel命令,如果不这样,那么我要切换到node_modules/.bin目录下才能执行babel命令。我总感觉这里怪怪的,是不是姿势没对,还望大家指点指点
翻遍了google,在webstorm的官方论坛里也搜索遍了,都没有找到答案,最后是这么解决的:
因为我们知道,webstorm他也是用命令行去执行babel命令,之前我发现webstorm的terminal打开会报错,但是没有太注意,我只是把这个错误记录了下来,放到浏览器里面开了一个google标签页,就没有管了,因为一直在想babel的问题,心想之后再来解决(其实是因为我先大概搜索了一下没有找到答案)。
在2,3个小时的搜索无解后,我开始想,应该和这个有很大的关系,于是继续搜索,还是无解,想着直接提issue了,但是回复可能要等几天,突然发现,我的webstorm是2016.1版本,他一直提示我更新,会不会和这个有关系,于是乎立马更新,然后破解,打开了发现terminal正常了。。。
然后操作和以前完全一模一样,这次babel就能用了,这也印证了之前的结论,"webstorm他也是用命令行去执行babel命令",所以你必须确保它的terminal能正常使用。OK,忙活了2,3个小时也算是解决了问题,没有白费。