webstrom中如何使用babel?（图文并茂）

备注：babel版本为7.4。

吃码小妖：以下操作已成功。

以下为操作步骤：

01、WebStorm现在支持ES2015+，无需安装任何其他扩展。

02、配置babel的官网文档地址：

03、File watcher是一个WebStorm内置工具，允许在文件更改时自动运行一些命令行工具。

对于Babel，WebStorm已预先配置了文件监视器。

04、安装babel-cli

npm install --save-dev babel-cli
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

05、现在转到首选项| 工具| 文件观察者，单击+按钮（ Preferences | Tools | File watchers），然后从列表中选择Babel文件观察器。

指定Babel可执行文件的路径，然后单击“确定”。

默认情况下，所有扩展名为.js的文件将在更改时自动使用Babel进行编译。

图片.png

在File watcher配置中，检查Babel的路径：它应该在项目node_modules文件夹中（例如OS X上的 node_modules/.bin/babel）。

在Windows上，它必须是exe，bat或cmd文件。
所有其他Watcher设置都是预定义的，因此现在可以使用了。使用此默认设置，编译的文件将位于dist文件夹中。

图片.png

吃码小妖截图：

图片.png

【】可以在文件观察器（File watcher）中修改的设置：

文件类型（File type）

指定观察者将“监视（watch）”并运行程序的文件类型。如果使用的是文件扩展名.es6或.jsx，请在下拉列表中分别选择ECMAScript 6或React JSX。

范围（Scope）

选择观察者将“观察”的范围。默认情况下，范围包括所有项目文件;

但是，可能希望在不触发观察者的情况下排除要编辑的测试文件或其他一些文件。

可以在Preferences |中创建新Scope并设置排除规则外观与行为|作用域。（ Preferences | Appearance & Behavior | Scopes.）

Program：babel命名位置。

F:\dev\node_modules.bin\babel

参数（Arguments）

可以在此处指定Babel CLI的选项。

使用WebStorm中的默认配置，生成的ES5文件和源映射将保存在项目根目录的dist文件夹中。将保留文件名及其父目录。

（吃码小妖：确实如此）

图片.png

要刷新的输出路径 - 在此字段中，您应指定已编译文件的路径（可以是保存文件的目录或文件本身，用冒号分隔）。 IDE将查看这些路径以进行外部更改，并确保更改与项目同步。

工作目录（Working directory****）（在工作目录和环境变量下）

执行程序的目录。默认情况下，这是文件的目录。

06、最后，在语言和框架 - JavaScript - JavaScript语言版本（Languages & Frameworks - JavaScript - JavaScript language version）中，选择ECMAScript 6。

07、创建.babelrc配置文件
在项目根目录中创建.babelrc配置并启用一些插件。

npm install @babel/preset-env --save-dev

要启用预设，必须在.babelrc文件中定义它，如下所示：

{
  "presets": ["@babel/preset-env"]
}