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

Question

我刚开始使用 Babel，但已根据此处的安装指南安装了它 https://babeljs.io/setup#installation

最后它说您需要安装插件才能使其工作:

Now, out of the box Babel doesn't do anything ... You will need to add plugins for Babel to do anything.

我想使用此插件: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 的子目录.