如何在webstorm上自动编译es6

最新推荐文章于 2025-05-07 15:21:34 发布

weixin_39107093

最新推荐文章于 2025-05-07 15:21:34 发布

阅读量1k

点赞数

本文详细介绍如何在WebStorm中设置支持ES6语法的项目，包括安装必要的工具、配置文件监视器及预设等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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