巴别塔似乎不起作用答案

【问题标题】：Babel doesn't seem to work巴别塔似乎不起作用
【发布时间】：2016-10-07 12:07:31
【问题描述】：

我在 WebStorm 2016.2.2、Node.js 6.6.0 和 TypeScript 1.8 中构建了一个项目。

由于某些原因，在此处指定：ES6 import and export are not supported in Node.js，我需要使用 Babel。

我已经安装了 Babel 和 babel-preset-es2015 并添加了一个文件观察器，但我仍然收到“意外的令牌导入”错误。看来 babel 不行了。

1) 为了将我的 js 文件转译为 ES5，我需要采取额外的措施吗？

2) WebStorm设置中的“JavaScript语言版本”应该设置什么版本的ES？

3) Babel 是否应该像 TypeScript 编译器那样生成另一个带有输出的文件？

任何帮助将不胜感激！

【问题讨论】：

标签： javascript node.js ecmascript-6 webstorm babeljs

【解决方案1】：

以下是适合我的 Babel 文件观察器设置：

Arguments: $FilePathRelativeToProjectRoot$ --out-dir $ProjectFileDir$/dist --source-maps  --presets es2015
Working directory: $ProjectFileDir$
Output Paths to Refresh: $ProjectFileDir$/dist/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js:$ProjectFileDir$/dist/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js.map

它将文件编译到单独的目录，保留原始文件名，以便require()工作；此外，WebStorm 知道生成的文件，因为一旦编译完成，文件系统就会正确刷新

【讨论】：

【解决方案2】：

1）在项目根目录下创建一个名为.babelrc的文件，内容如下：

{
  "presets": ["es2015"]
}

安装 es6 预设是不够的，你必须告诉 babel 使用该预设。供参考：https://babeljs.io/docs/plugins/preset-es2015/

2) 尝试设置 ECMAScript6

【讨论】：

刚刚试了一下，不幸的是仍然遇到同样的错误:-(
你是如何运行 babel 的？在控制台中尝试，cd 进入应用程序的根目录，然后运行：babel script.js --out-file script-compiled.js（当然你必须更改文件名）。有效吗？
您是否将 Webstorm 中的 javascript 语言版本更改为 ECMAScript 6？你应该这样做
仅供参考，您还可以将 .babelrc 中的所有设置添加到您的 package.json 文件中，例如 "babel": { "presets": ["es2015"], "plugins": ["transform-runtime"] }。
全局安装 babel，即运行npm install -g babel-cli。如果您已经安装了它，那么它可能不在您操作系统的 PATH 中。有关更多信息，请查看我的答案中的链接。如果您在本地安装它，它将位于您项目的node_modules 目录中。所以尝试像这样运行它：node ./node_modules/babel-cli/bin/babel.js

【解决方案3】：

不要将 babel-preset-es2015 用于 Node.js 6。这会将您的源代码转换为 ES5，而您已经拥有 97% 的原生 ES6 支持，从而导致严重的性能损失。仅仅添加它也不会启用模块转换。

使用babel-preset-node6 预设或添加transform-es2015-modules-commonjs 插件。

【讨论】：

感谢您的建议！