如何在webstorm上自动编译es6
来源:互联网 发布:《梦里花落知多少》 编辑:程序博客网 时间:2024/05/18 01:04
1.在webstorm中创建项目.
2.在项目的根目录下创建package.json
{
"name": "test-project",
"version": "1.0.0"
}
3.打开webstorm的Terminal (快捷键alt+f12),安装babel-cli.(需要先安装node.js)
npm install --save-dev babel-cli
4.File-->Settings-->Languages&Frameworks-->JavaScript JavaScript language version 选择ECMAScript 6.
5.File-->Settings-->Tools-->Files Watchers 中加上Babel
6.将Files Watchers 中 Babel 中的Program 改为$ProjectFileDir$\node_modules\.bin\babel.cmd (windows中)
7.在Terminal中,安装babel的ES6的preset
npm install --save-dev babel-preset-es2015
8.在根目录下新建一个.babelrc文件(就是babel在当前项目的配置文件),我创建的是babel.babelrc
{
"presets": [
"es2015"
]
}
9.ok
备注:我在项目中将Files Watchers 中 Babel 中
File type:JavaScript
更改为
JSX Harmony
Arguments:--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$
更改为
--source-maps --out-file $FileNameWithoutExtension$.js --presets es2015 $FilePath$
Output paths to refresh :$FileNameWithoutExtension$-compiled.js:$FileNameWithoutExtension$-compiled.js.map
更改为
$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map
阅读全文
0 0
- 如何在webstorm上自动编译es6
- 在webstorm上利用babel实现自动编译es6文件
- webstorm自动编译typescript
- WebStorm自动编译less
- webstorm编辑器使用babel自动转化es6
- Webstorm中配置babel参数在同一目录下将ES6编译为ES5
- webstorm设置sass自动编译
- less如何安装并集成在webStorm上
- 设置Webstorm支持ES6并自动转码成ES5
- WebStorm使用Babel自动转换ES6代码为ES5代码
- 设置Webstorm 利用babel将ES6自动转码成ES5
- less,webstorm 自动编译输出css配置
- webstorm scss 自动编译添加css3前缀
- win10下配置webstorm自动编译SASS
- webstorm配置scss自动编译路径
- 如何在编译过后自动签名apk
- 在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录
- WebStorm使用ES6
- Struts2基础
- spring循环依赖
- 压缩归档
- LeetCode 448. Find All Numbers Disappeared in an Array
- [Leetcode] 305. Number of Islands II 解题报告
- 如何在webstorm上自动编译es6
- ASP.NET获取真正的客户端IP地址的6种方法
- 查看命令帮助文档
- php开发中经常用到的实例
- 微信小程序实用教程
- 清算/报表/日终跑批程序之性能优化案例(一)
- centos7系统安装python3.6.2版本
- 最小二乘法简介
- Android——Handler机制