webstorm bable

1、设置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/

2、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

1. 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

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

参考文献

WebStorm配置Babel编译环境
[nodejs v6+ 不兼容 ES6 import/export 优雅解决方法]

遇到的问题：一直提示出错，则只要升级到最新版本的webstorm

首先在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个小时也算是解决了问题，没有白费。