webstrom如何配置babel来转换es6
网上有很多关于如何设置babel的。我学习着设置,但总差那么几步,没能满足我的需求。
我使用的是webStorm2017.1版本。
babel安装准备
使用webStorm自带的filewatcher中的babel自动编译前,需要安装一些babel库
全局安装babel-cli
npm install -g babel-cli
网上有些教程让全局安装babel,实际上新的babel已经集成在babel-cli里面了。 另外.
网上有部分教程是项目安装babel-cli的。 npm install babel-cli --save-dev 项目安装也是可以的,不过在filewatcher的babel设置里,要在program里选择项目里的babel地址。
安装其他babel库
npm install --save-dev babel-preset-env
网上很多教程要求安装babel-preset-es2015,在实际编译时,使用webStorm的默认设置,编译是不成功的。 env这个包,会根据es6的运行环境去编译js,而无序指定哪个具体的es版本。
.babelrc
在项目根目录下,也就是package.json同目录下,创建.babelrc文件。【该文件非必须】
很多网上教程推荐里面内容为:{"presets":["es2015"]} 。这里的内容,需要根据自己的需要设置。webstorm的默认设置里,其实是不需要网上的这个推荐内容了。
通过.babelrc,可以实现更多功能。
webstorm开启es6
file - setting - languages & frameworks - Javascript
在右侧的框中,选择ECMAScript6
File Watcher 中babel设置
webstorm 里的路径: file - setting - tools - File Watcher,
从图中右侧的+号里打开新窗口,选中babel,在图中间就会出现Bebel了。
双击上图的Babel,会进入babel设置界面。
在这个界面里,需要设置的地方有三个,Program,Arguments, Output paths to refresh
这里的设置很重要,网上的教程,基本没有对这三个进行详细介绍的。
Program 如果是全局安装babel-cli的,这里默认就好了。如果是项目安装的,就要右边的...到项目的node_modules文件夹中,找到.bin文件夹下面的babel文件,点ok就可以了
Arguments 默认为: $FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets env
Output paths to refresh 默认为:dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js.map
运行编译后的结果是这样的。
dist目录不一定是我们想要的目录。我们想把编译后的文件都放在js目录下,于是就将Arguments里的dist改成了js。 结果编译后的文件却像下图这样,不断嵌套。
要解决这个不断嵌套的问题,就需要把Output paths to refresh 中的dist,同样该为js,就不会出现这种嵌套编译了。
我的目标要编译成这种结构的js
我的设置为: 这样就可以让编译后的文件和原文件在同一个文件夹下
Arguments:
$FilePathRelativeToProjectRoot$ --out-file $FileDir$\$FileNameWithoutExtension$-compile.js --source-maps --presets env
Output paths to refresh:
$FileDir$\$FileNameWithoutExtension$-compile.js:$FileDir$\$FileNameWithoutExtension$-compile.js.map
webstrom如何配置babel来转换es6的更多相关文章
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
我遇到了一个问题,我在已经配置babel的项目中通过require引入了一个项目目录外层的另一个js文件,前期是可以成功转换并打包的,但是到了后期就不行了,报错: 这个报错的意思是,引入的js文件中有 ...
- 利用babel工具将es6语法转换成es5,Object.assign方法报错
一.新建工程初始化项目 1.新建工程文件夹这里起名叫做es6,然后在里面创建两个文件夹分别为src .dist如下图:(src为待转换es6 js存放目录,dist为编译完成后的es5 js存放目录) ...
- Babel6.x 转换ES6
本文介绍Babel6.x的安装过程~ 首先呢,可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题:安装Babel(命令行环境,针对Babel6.x版本) 1.首 ...
- 配置babel
配置babel ECMAScript的版本,每年都会定期举行会议,发布各种标准,当前版本到了2019,但大部分人使用的浏览器,都可以支持es2015,也就是es6,要等到大部分浏览器都支持到最新版本, ...
- 关于webpack,babel,以及es6和commonJS之间的联系(转)
add by zhj: babel是将es6转为es5,而webpack从名字也能看出来,是一个打包工具,根据文件之间的依赖关系,将文件进行打包 原文:https://blog.csdn.net/a2 ...
- 【02】webstorm配置babel转换器+截图(by魔芋)
[02]webstorm配置babel转换器+截图(by魔芋) [02]魔芋的安装过程 01,配置babel. 02,用webstorm.注意webstorm的版本号. 03,使用 ...
- webpack配置babel篇
babel-polyfill & babel-runtime & babel-preset-env babel-core babel-core 的作用是把 js 代码分析成 ast , ...
- Babel下的ES6兼容性与规范
前端开发 Babel下的ES6兼容性与规范 ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...
- webpack.config.js====配置babel
参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...
随机推荐
- java调用c库实例
java由于语言限制,不能使用char*作为返回值. 局部变量的字符串不能正常返回,vc可以正常接收,java不能接收. c语言 int __stdcall GetCharacterCodeJn(ch ...
- Android各版本重要变动记录
本文来自同步博客. Android M:运行时权限 运行时权限属于比较熟悉的话题不深入展开.除了support包可以让应用完成运行时权限,github上也有好多扩展.用得比较多的是Google官方的E ...
- 飞飞影视cms标签
解析范围: 全站所有模板均可调用 模板名称: 所有模板 调用函数: ff_mysql_vod(参数1:值1;参数2:值2;参数3,值3....;参数n,值n),支持的参数列表如下 * 以下变量名如$v ...
- history统计命令最多的20条
1.1.1 统计使用命令最多的20条 [root@ob1 ~]# history|awk '{ml[$2]++}END{for (i in ml) print i,ml[i]}'|sort -nrk ...
- Apache2.4.x版wampserver本地php服务器如何让外网访问及启用.htaccess
http://www.jb51.net/article/61193.htm ———————————————————————————————————————————— 这篇文章主要介绍了Apache2. ...
- 看了这个才发现jQuery源代码不是那么晦涩
很多人觉得jquery.ext等一些开源js源代码 十分的晦涩,读不懂,遇到问题需要调试也很费劲.其实我个人感觉主要是有几个方面的原因: 1.对一些js不常用的语法.操作符不熟悉 2.某个functi ...
- UML总结---UML九种图关系说明
UML中包括九种图:用例图.类图.对象图.状态图.时序图.协作图.活动图.组件图.配置图. 1)用例图(Use Case Diagram) 它是UML中最简单也是最复杂的一种图.说它简单是因为它采用了 ...
- Linux如何通过命令查看日志文件的某几行(中间几行或最后几行)
linux 如何显示一个文件的某几行(中间几行) [一]从第3000行开始,显示1000行.即显示3000~3999行 cat filename | tail -n +3000 | head -n 1 ...
- php连接mssql pdo
怀疑mssql的默认编码...应该不是utf8吧??? <?php $cnx = new PDO("odbc:Driver={SQL Server};Server=XEJMZWMDIX ...
- 关于Cocos2d-x中增加暂停按钮的步骤
1.在GameScene.cpp的init方法中先定义一个里面放着可变换并在变换的时候会响应事件的MenuItem的Menu,这个Menu里面的可变换MenuItem又由两个小MenuItem组成,每 ...