【02】webstorm配置babel转换器+截图（by魔芋）
总体目录地址
【02】webstorm配置babel转换器+截图（by魔芋）
【02】魔芋的安装过程
01，配置babel。
02，用webstorm。注意webstorm的版本号。
03，使用webStorm自带的file watcher中的babel自动编译。须要安装一些babel库。
04，全局安装bable-cli。（实际上新的babel已经集成在babel-cli里面了。）
npm install -g babel-cli npm install--save-dev babel-preset-env
安装了babel-preset-env就不用安装babel-preset-es2015了。
env这个包，会根据es6的运行环境去编译js，而无序指定哪一个具体的es版本。html
05，或项目安装babel-cli（要在filewatcher的babel设置里，要在program里选择项目里的babel地址。）
npm install babel-cli --save-dev
06，在项目根目录安装package.json.
用npm init 而后一路回车便可。
07，.babelrc 文件没法在电脑文件夹直接建立，会报错，说文件缺乏文件名，可是能够在webstorm里建立。
在项目根目录下，也就是package.json同目录下，建立.babelrc文件。【该文件非必须】node
再也不使用：{"presets":["es2015"]} 了。git
.babelrc文件：（官网配置）
{
"presets": [ "env" ] }
08，webstorm开启es6
file - setting - languages & frameworks - Javascriptes6
09，
File Watcher 中babel设置
webstorm 里的路径： file - setting - tools - File Watcher,github
从图中右侧的+号里打开新窗口，选中babel，在图中间就会出现Babel了。web
begin：魔芋：貌似全局安装了babel后，babel的配置就自动设置好了。
双击上图的Babel，会进入babel设置界面。sql
在这个界面里，须要设置的地方有三个，Program，Arguments, Output paths to refreshnpm
魔芋：个人配置参数为：(成功版)（也是webstrom最最原始的参数）
Program:
C:\Users\Miki\AppData\Roaming\npm\babel.cmd
（若是是全局安装babel-cli的，这里默认就行了。）
（若是是项目安装的，就要右边的...到项目的node_modules文件夹中，找到.bin文件夹下面的babel文件，点ok就能够了。）
Arguments:
--source-maps --out-file
FileNameWithoutExtensionFileNameWithoutExtension-compiled.js FilePathFilePath
(魔芋解释：这里的
FileNameWithoutExtensionFileNameWithoutExtension就是咱们的JS文件名。
好比a.js 就变为a-compiled.js
FilePahFilePah 就是输出到同目录下。
在文件夹的顺序以下图：
在webstorm中的效果如：
)