Babel 预设在 .babelrc 文件中工作，但不在 Webpack 配置文件中答案

【问题标题】：Babel preset working in .babelrc file but not in Webpack config fileBabel 预设在 .babelrc 文件中工作，但不在 Webpack 配置文件中
【发布时间】：2017-02-15 02:09:18
【问题描述】：

除了能够在另一个项目中重复使用.babelrc 文件之外，是否有理由将 Babel 预设存储在 .babelrc 而不是 webpack.config.js 中？

我有一个使用以下.babelrc 文件可以正常工作的应用程序：

{
  "presets": ["es2015", "stage-0","react"]
}

我将应用程序更改为另一个没有 .babelrc 文件的 Webpack 结构。这里是webpack.config.js：

 module: {
    loaders: [
      {
        test: /(\.js|\.jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: { presets: ['es2015', 'stage-0', 'react'] }
      },

奇怪的是，应用程序在解析我的 server.js 文件中的 JSX 和 import 关键字时停止工作。它仅在我添加回 .babelrc 文件时才有效。谁能解释一下为什么它只适用于.babelrc 文件？

【问题讨论】：

听起来你的 server.js 文件没有使用 Webpack 而是依赖 babel-node / babel-register？
server.js 文件使用的是 Webpack.config
我实际上不知道你的意思，但你可能会遇到一些事情，因为我在服务器文件中发现了一行 require('babel-core/register') 但同时它链接（即导入）webpack.config 文件
当你说它'使用' Webpack 时，你的意思是 server.js 是由 Webpack 生成的一个包，还是你的意思是 server.js 需要webpack.config.js？
第二种，server.js需要webpack.config.js

标签： reactjs webpack babeljs

【解决方案1】：

在webpack.config.js 中将您的加载程序更改为babel-loader，在此之前您需要使用安装它们

npm install babel-loader babel-core babel-preset-es2015 --save-dev

还要确保你已经安装了babel-preset-react

命令

webpack.config.js

 module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy'], 
        }
      }
    ]
  },

【讨论】：

不，不幸的是，这不是答案，因为它仍然没有做任何事情。我有其他应用程序使用上面的 babel 而不是 babel-loader，它们仍然可以工作。
检查更新，这就是我使用 webpack 模块的方式，它对我有用。让我知道它现在是否有效
不，我加了那些插件，但它仍然坚持要我放入 .babelrc 文件。
该错误是关于与 jsx 和“import”作为关键字相关的语法错误。但是发现了一些新的东西——我原来的 server.js 文件中有 require('babel-core/register') ，我必须有 .babelrc 文件才能工作，但是当我通过删除 'require( 'babel-core/register')';当我删除 .babelrc 时，该应用程序工作了。我真的不明白为什么，我猜 babel rc 代表 babel register-core，所以 require 意味着我必须有 .babelrc 文件
yes require('babel-core/register') 使用 .babelrc 并在其中定义了预设。所以这就是问题的原因。现在解决就好了

【解决方案2】：

在您的 webpack 配置中，您可以使用 babel 关键字设置 babel 选项，而不是传递 query 选项：

babel: {
  babelrc: false,
  presets: ['react', 'es2015', 'stage-0'],
  plugins: ['react-html-attrs', 'transform-decorators-legacy']
},
modules: {
  loaders: [
    ...
  ]
}

这似乎解决了我的问题。不幸的是，我不完全知道为什么会这样:-(

您可以看到一些 babel-loader 测试正在使用它来设置选项： https://github.com/babel/babel-loader/blob/master/test/options.test.js#L70

【讨论】：