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

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

备注：babel版本为7.4。

吃码小妖：如下操做已成功。

如下为操做步骤：

0一、WebStorm如今支持ES2015+，无需安装任何其余扩展。

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

blog.jetbrains.com/webstorm/20…

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

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

0四、安装babel-cli

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

0五、如今转到首选项| 工具| 文件观察者，单击+按钮（ Preferences | Tools | File watchers），而后从列表中选择Babel文件观察器。

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

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

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

在Windows上，它必须是exe，bat或cmd文件。
全部其余Watcher设置都是预约义的，所以如今能够使用了。 使用此默认设置，编译的文件将位于dist文件夹中。

吃码小妖截图：

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

文件类型（File type）

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

范围（Scope）

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

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

能够在Preferences |中建立新Scope并设置排除规则外观与行为|做用域。（ Preferences | Appearance & Behavior | Scopes.）

Program：babel命名位置。

F:devnode_modules.binbabel

参数（Arguments）

能够在此处指定 Babel CLI的选项。

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

（吃码小妖：确实如此）

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

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

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

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

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

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

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

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