带有 Babel 的 WebStorm 不使用导入语句

Question

我正在使用 WebStorm 2017.1.3，尽管也尝试使用最新的 EAP，但我无法使 import from 语句起作用。我一直收到以下错误：

import Utils from './utils'
^^^^^^

SyntaxError: Unexpected token import

在我的 packages.json 中，我定义了 babel-cli、babel-preset-env 和 babel-preset-es2015。我关注了各种博客文章和视频，但仍然遇到同样的错误。

ES6 在设置中启用，我尝试按照文档添加 Babel 文件监视，但似乎没有任何效果。这感觉应该更容易，而且可以工作，所以我一定是错过了拼图的一个重要部分。

有没有人有从新项目开始逐步工作的方法，如何指导配置 webstorm 以与 import 一起工作？

有的地方说用file watch，有的地方说改项目配置解释器就用babel-node。别人说一定要用Gulp...很乱。

谢谢。 fLo

Answer 1

要说清楚：这与配置 WebStorm 无关，错误来自运行代码的 Node.js 解释器。 Node.js 仍然不原生支持 ES6 模块（实际上，目前没有 JavaScript 运行时支持它们 - ECMAScript 没有定义 "Loader" 规范来确定如何将模块插入运行时。加载器规范由 WHATWG 定义，但尚未最终确定）。所以，要让 ES6 imports/exports 被接受，你需要使用转译器。当前的行业标准是 Babel

使其工作的最简单方法如下：

使用 npm install --save-dev babel-cli babel-preset-env
在项目根目录中创建一个 .babelrc 文件：

{ "presets": ["env"] }
在您的 Node.js 运行配置中，将 -r babel-register 传递给节点：

使用此配置，您的代码将由 Babel 即时转译，不需要文件观察器等

带有 Babel 的 WebStorm 不使用导入语句

WebStorm with Babel not working with import statements

webstorm