找不到在 babel.config.json 中指定的模块

Question

我是使用 Babel 的新手，但已根据此处的安装指南安装它 https://babeljs.io/setup#installation

最后说你需要安装插件才能让它工作：

现在，开箱即用的 Babel 不做任何事情......您需要为 Babel 添加插件才能做任何事情。

我想使用这个插件：https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator 来修复一些 Internet Explorer 11 问题，如下所述：async function declaration expects ';' in Internet Explorer

我在项目的根目录中创建了一个名为 babel.config.json 的文件，并在其中添加了以下内容。

{
    "plugins": ["@babel/plugin-transform-async-to-generator"]
}

我的package.json 包含这个：

"scripts": {
     "build": "babel webroot/js -d webroot/js/babel"
},
"devDependencies": {
     "babel-cli": "^6.0.0"
},

当我从项目根目录执行npm run build 时，它会给出以下错误消息。

Error: Cannot find module '@babel/plugin-transform-async-to-generator' from '/Users/andy/my-project'

在创建babel.config.json 之前，我能够运行npm run build 而不会出现任何错误。根据引用，除了输出与转换之前相同的 JavaScript 之外，这并没有真正做任何事情。但我知道该过程有效 - 在我的情况下，输入文件位于 webroot/js 中，并将等效的转译文件输出到 webroot/js/babel。

我不明白如何解决此错误。这是我的配置文件有问题还是需要额外设置？

我在https://babeljs.io/docs/en/config-files 阅读了有关 Babel 配置文件的文档，发现这非常令人费解。我的目标是每个项目都有一个配置文件，这就是我选择babel.config.json

的原因

npm 版本是 6.13.4，node 版本是 12.16.1。

Answer 1

babel-cli 已过时，您应该安装@babel/cli。它还具有对 @babel/core 的对等依赖项，您也需要安装它。 @babel/plugin-transform-async-to-generator插件需要单独安装。

总结：

• 卸载过期的babel-cli:

npm uninstall --save-dev babel-cli

• 安装所需的包：

npm install --save-dev @babel/cli @babel/core @babel/plugin-transform-async-to-generator

---

关于 IE 11 的问题。@babel/plugin-transform-async-to-generator 不会解决您的问题。 IE 11 不支持yield。

如果您想使用最新的 ECMAScript 功能并且仍然支持各种浏览器，您应该改用@babel/preset-env。您可以在官网查看文档：@babel/preset-env。

要让async 在 IE 11 中工作，您还需要设置 polyfill。 @babel/preset-env 不会在默认设置下使用它们。在useBuiltIns 选项下查看说明。

---

此外，您的构建脚本存在问题，特别是以下行：babel webroot/js -d webroot/js/babel。

使用这样的命令，babel 将处理整个webroot/js 目录（包括子目录）并将转译文件放置到webroot/js/babel。这意味着在您再次运行此命令后，它不仅会处理您的原始源文件，还会处理转译的源文件，因为webroot/js/babel 是webroot/js 的子目录。

Answer 2

我认为你需要安装@babel/plugin-transform-async-to-generator。更多内容：https://www.npmjs.com/package/@babel/plugin-transform-async-to-generator#install

npm install --save-dev @babel/plugin-transform-async-to-generator