ES6转ES5

WebStorm中可以添加 FileWatcher 将 ES6 代码转为 ES5代码；
也可以通过gulp、webpack等构建工具来实现，有时候自己写个简单的页面，并不想引入这些工具，这时候Webstorm的FileWatcher就非常有用了；

WebStorm 方案

1、es6 的文件后缀用 .es6，不是 .js

这是因为 FileWatcher 是监听对应类型的文件来做处理，如果源文件和转换后的文件都是 .js 文件，转换一次后，FileWatcher 又监听到有一个 js 文件变动，把转换后的 js 文件又转换了一遍，这样就循环触发下去了；

2、项目中安装依赖 core、cli、preset-env

npm install --save-dev @babel/cli @babel/core @babel/preset-env

从ES7开始，babel 相关模块都用 @babel/xx 这种形式了，@ 后面的 babel 是作用域，官方的 babel 相关模块都在这个作用域下（官方文档）；传统的 babel-core、babel-cli 这种形式，babel- 前缀容易被其他人占用；

也就是说，babel-core、babel-cli、babel-preset-env 这些模块是老模块，支持到 ES6 语法，新的语法不支持了

3、配置 FileWatcher

路径：Settings(Windows) 或 Preferences(Mac) — Tools — File Watchers — Babel；相关配置如下：

File type

选 “ECMAScript 6”，不是 JavaScript；

Program

$ProjectFileDir$/node_modules/.bin/babel

默认是这个值，第二步将依赖装到了当前项目中，正好对应这个路径，如果装成全局，需要改成全局地址；如果该值是红色，说明路径不对，没有找到 babel 程序；

Arguments

WebStorm 默认值如下

$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets @babel/env

意思是将文件转换后输出到项目根目录下的dist文件夹中，默认配置没有循环触发的问题，因为排除了输出文件夹；

我不喜欢单独将文件生成到其他文件夹中，所以改成了下面的配置；

--source-maps --out-file $FileDir$/$FileNameWithoutExtension$.js --presets @babel/env $FileDir$/$FileNameWithoutExtension$.es6

意思是将当前文件夹下后缀为 es6 的文件转换为 es5 代码，放到当前文件夹下，文件名不变，后缀改为 js，同时生成 sourcemap 文件；所有参数前都是两个中划线；

放到同一文件夹中，有一个好处，就是WebStorm会自动识别，将转换出来的文件折叠到源文件下，像下面这样：

source-maps ：表示要生成sourcemap，即 .js.map文件，如果不需要，删除即可；

out-file path/xx.js ：表示输出文件到path这个文件夹下，文件名为xx.js；
out-dir dist ：表示输出文件到文件夹下；

$FileName$ ：这种$$包起来的字符串叫宏，就是一些动态参数，比如：
$FileName$ ：包含后缀的文件名
$FileDir$ ：当前文件夹；
$FileNameWithoutExtension$ ：不包括文件后缀的文件名；$FileDirRelativeToProjectRoot$ ：项目根目录

Output paths to refresh

这个设为空就行了

其他

需要注意的是，整个过程中，不需要建 .babelrc 文件，也不需要在 package.json 中指定 presets；如果不放心，就显式设置一下（package.json中）

"presets": ["@babel/preset-env"]

browserslist 也可以不指定，即不用在 package.json 中添加 browserslist 字段，或者新建 .browserslistrc 文件，设置浏览器支持情况，默认应该是转成ES5的；也显式设置（package.json），下面是默认的设置:

"browserslist": ["> 0.25%, not dead"]

如果发现转换后的文件和源文件一致，或者里边还是包含一些ES6的语法，肯定是 browserlist 浏览器版本设置的太高了，修改 browserslist 就好了；

今天在网上搜了一下，头疼，有些教程的截图里，明显存在1中提到的循环触发问题，还一本正经地介绍如何处理；

参考链接： Using Babel、ECMAScript 6 in WebStorm: Transpiling

Gulp 方案

这个就比较简单了，除了上面安装的三个babel依赖，还需要新装一个 gulp-babel

npm install --save-de gulp-babel

gulpfile.js 中，这种方式下，js文件就不一定非得以 .es6 结尾了；

var babel = require("gulp-babel");
gulp.task('es625', function () {
  gulp.src(['js/**/*.js',])
    .pipe(babel({
        presets: ['@babel/env']
      }))
    .pipe(gulp.dest('dist/'));
});

presets 在 babel 参数中设置；browserslist 不设置就可以，也可以显式设置；