配置 webpack babel-loader 与在 package.json 中配置有什么区别? [英] Whats the difference when configuring webpack babel-loader vs configuring it within package.json?

问题描述

请帮助我理解在 .babelrc 和 webpack 加载器选项中设置 babel 配置与在 package.json 中插入它之间的区别.

Hi please help me understand the differences between setting babel config inside .babelrc vs webpack loader options, vs inserting it in package.json.

例如，如果我将预设放在 webpack babel-loader 选项与 package.json 或单独的 .babelrc 配置文件中，会有什么不同吗?

For example, Would it make any difference if I put the presets in the webpack babel-loader options vs package.json or a separate .babelrc config file?

在 webpack 配置中:

In webpack config:

          {
            test: /.(js|jsx|mjs)$/,
            loader: require.resolve('babel-loader'),
            options: {
                 "presets": [
                    "react-app"
                  ]
            },
          },

在 json 包中:

  "babel": {
    "presets": [
      "react-app"
    ]
  },

推荐答案

Webpack 配置 :

Webpack config :

在 webpack.conf.js 中完全配置 babel-loader(没有 .babelrc).

config the babel-loader completely in webpack.conf.js (no .babelrc).

Webpack 配置 + .babelrc :

Webpack config + .babelrc :

在webpack.conf.js中启用babel-loader，让options对象为空.在 .babelrc 中配置选项.Webpack 将使用 babel-loader 和 .babelrc 中给出的选项.

Enable the babel-loader in webpack.conf.js, let the options object be empty. Configure the options in a .babelrc. Webpack will use the babel-loader with the options given in .babelrc.

如果你有 .babelrc，你可以删除 webpack 预设选项，因为 babel-loader 使用 babel，这显然尊重 .babelrc.

you can remove the webpack presets options if you have a .babelrc, because babel-loader uses babel, which obviously respects the .babelrc.

这篇关于配置 webpack babel-loader 与在 package.json 中配置有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！