Babel的WebStorm不使用import语句

Question

我正在使用WebStorm 2017.1.3，虽然也尝试使用最新的EAP，但我无法获得import Utils from './utils' ^^^^^^ SyntaxError: Unexpected token import 语句。我只是不断收到以下错误：

packages.json

在babel-cli我babel-preset-env，babel-preset-es2015和import已定义。我已经关注了各种博文和视频，但仍然遇到同样的错误。

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

是否有人一步一步地从新项目开始，如何指导配置webstorm以使用babel-node？

有些地方说使用文件监视，其他人说只是为了改变项目配置解释器以使用http://example.com/gallery/images/large/this image.jpg 。其他人说必须使用Gulp ......非常混乱。

谢谢。 FLO

Answer 1

说清楚：这不是关于配置WebStorm，错误来自运行代码的Node.js解释器。 Node.js本身仍然不支持ES6模块（实际上，没有JavaScript运行时当前支持它们 - ECMAScript没有定义＆＃34; Loader＆＃34;规范，它决定了模块如何插入运行时.Loader规范正在由WHATWG定义，但尚未最终确定）。因此，要接受ES6导入/导出，您需要使用转换器。目前的行业标准是Babel

使其成功的最简单方法如下：

• 使用npm install --save-dev babel-cli babel-preset-env

在项目中安装babel

• 在项目根目录中创建.babelrc文件：

  {＆＃34; presets＆＃34;：[＆＃34; env＆＃34;]}

在Node.js运行配置中

• ，将-r babel-register传递给节点：

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