Webpack babel-loader 是否需要 babel.config.js？

Question

我有一个像下面这样的 webpack 设置

test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
  loader: 'babel-loader?cacheDirectory',
  options: {
    presets: [
      '@babel/preset-env',
      '@babel/react', // Error: Plugin/Preset files are not allowed to export objects, only functions.
    ],
    plugins: [
      [
        '@babel/plugin-proposal-decorators',
        {
          legacy: true,
        },
      ],
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true,
        },
      ],
    ],
  },
},

所以我还需要添加一个文件 babel.config.js或 .babelrc再次将配置加倍？

如果我使用 vscode，我需要这个文件吗 babel.config.js对于一些插件？

Answer 1

不，那是多余的。我看到您正在使用 babel-loader 中的示例文档。我建议使用 example在官方 babel 文档中(点击 webpack)。这使您的 webpack 配置保持简单，并允许通过放置 .babelrc 轻松覆盖文件夹中的 babel。在您喜欢不同设置的目录中。

.babelrc

{
    "presets": [
        "@babel/preset-env"            
        "@babel/preset-react",
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        {
            "loose: true
        }
    ]
}

你的 webpack 配置文件

module: {
    loaders: [
        {
            test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"
        }
    ]
}

考虑到该错误:确保您至少安装了 @babel/preset-react和 @babel/preset-env , @babel/core和 @babel/plugin-proposal-class-properties !您可能正在使用 babel 6 插件。你能分享你的 package.json吗？ ?