Webstorm上面通过babel将es6转会为es5

1.率先创建一个新的文本夹(名也do);
2.然继还穷目录下面新建一个package.json,只需要写清楚两个属于性即name和version,这个从未必须要和下我形容的均等,可以活动定义。

{
      "name":"test-project",
      "version":"1.0.0"
}

3.这打开webstorm的极(Terminal),快捷键为Alt+F12,安装babel-cli。

       npm install --save-dev babel-cli

4.装完babel-cli后,可以见见新生成了一个node_modules文件以及一个package-lock.json文件,同时发现package.json文件被几近起了
“devDependencies”: {
“babel-cli”: “^6.24.1”
}
这么一行代码,此代码说明babel-cli已装成功,形成了借助。

图片 1

image.png

5.然后更Settings->Languages &
Frameworks中甄选Javascript选项,同时以versin版本选择为ECMAScript6即可。这时候在js文件中应用es6的语法已经休见面来得红色的报错信息了。

图片 2

image.png

6.更于检索框中搜索File
Watcher,点图中之加号按钮,选择babel就会弹有一个New
Watcher窗口,就好在这边配置了。在布局之前我们还索要在终极安装Babel的preset以正确识别ES6代码,命令如下:

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

设置完后以以package.json文件中见面多发生
“babel-preset-es2015”: “^6.24.1”
这样一行代码,说明babel-preset-es2015乎成功安装及了。
接下来再次当绝望目录下面新建一个名为.babelrc文件,内容如下:

{
  "presets": [
    "es2015"
  ]
}

图片 3

图中

7.现在尚余下最后一步,
(1)首先以Program这项里面放入babel.cmd文件的入径(C:\Users\v_czjzhang\software\Nodejs\babel.cmd)
(2)在Arguments里面,将随即段代码

$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets=es2015

贴覆盖前的代码,然后点击OK,应用即可。

图片 4

image.png

这您以干净目录下面创建一个叫做吧test.js,在其中写es6的语法,会发现根本目录下面会联手多出去一个名也dist的公文,它其中为闻名吧test.js的文件,这个文件就是es6经babel编译过来的es5文书,如图所示

图片 5

image.png

图片 6

image.png

可以看es6文本为编译成es5文件了,而且是默认严格模式。
So,美滋滋!

作者:assassian_zj
链接:http://www.jianshu.com/p/2b373b0910ed
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。