如何让 @babel/plugin-proposal-private-methods 在 vue.js webpack 模板中工作？

Question

我有一个基于 vue.js webpack 模板的应用程序。 我需要使用私有字段的语法和类的私有方法。 为此，我安装了@babel/plugin-proposal-private-methods ^7.4.4 和@babel/core^7.0.0。 安装软件包后，我尝试构建开发版本，但出现以下错误。

Webpack 版本为 ^3.6.0，vue ^2.6.10，babel-core ^6.22.1，babel-preset-env ^1.3.2。

    ERROR in ./assets/main.js
    Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

Answer 1

看起来您正在使用 babel 6 加载 @babel/core@7.XX。

换句话说，您正在使用 babel 6 的 api 调用 babel 7 的核心编译器。

发布 babel 7，babel 团队进行了重大改造，它很棒但不兼容复古。

你的模板可能与 babel 6 一起工作，你需要一些 babel 7 插件。 所以总结一下 ip 你必须：

• 升级所有 babel 依赖项（cli、core、插件、预设...）
• 更新你的 babel 配置
• 替换已弃用的
• 可能升级你的 webpack babel loader 或者至少修复 webpack conf

我强烈建议您阅读官方升级文档： https ://babeljs.io/docs/en/v7-migration 您可能还想升级 webpack。

干杯

Answer 2

将以下内容添加到 build 部分下的 nuxt.config.js 文件中。

build: {
  babel:{
    plugins: [
      ['@babel/plugin-proposal-private-methods', { loose: true }]
    ]
  }
}