Question

嗨只是想知道是否有任何理由让.babelrc文件存储预设而不是在webpack.config文件中有预设（除了能够在另一个项目中重用babelrc文件）。我有一个使用.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文件？

Answer 1

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

进行安装

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'], 
        }
      }
    ]
  },

Answer 2

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

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

Webpack Babel - 关于.babelrc

2 个答案: