webstorm编辑器使用babel自动转化es6

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/p3118601/article/details/77122668

1. node对es6兼容程度不断提高，书写也不会受到限制
2. 注意：低版本的node对es6支持不是很好，测试的话会出现很多问题，建议升级node版本，windows的用户估计要到网站下载安装才能升级
3. 附网址：https://nodejs.org/en/download/
4. 目前我用的是6.112
5. 以下的所有node命令建议使用cmd命令执行，webstorm下边的Terminal执行的时候有时候出现问题，等找到解决办法后再更新
6. 新建一个空的项目testEs6
7. 常用的node命令

8. npm init 创建package.json文件    npm install <module-name> -g/--save-dev/--save 安装模块    npm update <module-name > 更新模块    npm uninstall <module-name > 卸载模块

9. 安装babel-cli

10. npm install babel-cli -g 安装后就在命令行中使用 babel 命令 把依赖写入 package.json npm install babel-cli --save-dev 转换命令：babel app.js --out-file build.js

11. 在项目中新建一个es6文件夹，包含一个index.js文件

12. 转换之前先将js文件的编码格式设置为es6

13. 
14. 设置完之后使用命令babel ./es6/index.js --out-file ./es6/a.js
15. 可以看到在es6的文件家中新增一个a.js文件，但是没有转换
16. 
17. 想要转换的话需要使用es2015

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

    在根目录下建一个.babelrc文件，设置为 {"presets": ["es2015"]}

19. 

20. 说明在windows下不能新建这个文件可以下载这个.babelrc

21. babel ./es6/index.js --out-file a.js

22. 

23. 转换成功的a.js
24. 自动转化设置
25. 点击这个Add watcher
26. 
27. 或者在file>settings>Tools>File Watchers添加babel
28. 
29. 
30. 我修改的

31. Arguments: --source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$ Qutput paths to refresh: $FileNameWithoutExtension$-compiled.js:$FileNameWithoutExtension$-compiled.js.map Working directory $FileDir$

32. 其中各个的设置的含义可以参考webstorm介绍：，下次再做介绍
33. 附：https://www.jetbrains.com/help/webstorm/2016.2/new-watcher-dialog.html
34. 这样的话只要修改es6下的index.js就会转义
35. 
36.