webstorm 配置 babel

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了webstorm 配置 babel脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

*个人手记

1.准备:系统-win10, 需先安装npm

2.全局安装babel-cli

使用cmd输入命令行:
npm install babel-cli -g

在npm根目录的会出现“babel.cmd”

clipboard.png

3.安装 babel-preset-env
新建一个项目文件夹,使用webstorm的cmd(或者使用cmd跳转到项目根目录)输入命令行:
npm install babel-preset-env

clipboard.png

然后在项目根目录会新建一个“node_modules”文件夹。

webstorm 配置 babel

4.开启webstorm对es6的支持;
file - settings - languages&framesworks - javascript;选择es6

webstorm 配置 babel

5.新建监听
filewatcher - 新建babel监听,参数使用默认的就可以。

webstorm 配置 babel

6.使用es6
新建一个js文件,使用es6语法,自动保存后,会项目根目录新建一个“dist”文件夹,里面放的就是es5的js文件。

webstorm 配置 babel

/2017-07-15 补充 /

由于直接安装babel时会创建“node_modules”文件夹,webstrom会立即索引该文件夹,导致卡顿现象.

在新项目时,如果没有"node_modules",先手动创建,然后把该文件夹移出索引:
右键该文件夹,选择"mark as"---"excluded";

webstorm 配置 babel

最后再安装babel.

脚本宝典总结

以上是脚本宝典为你收集整理的webstorm 配置 babel全部内容,希望文章能够帮你解决webstorm 配置 babel所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。