javascript - Webpack babel-loader 没有读取 .babelrc

Question

当我单独运行 babel 时，它会读取 .babelrc 并按预期进行转译。但是，当我使用 webpack 和 babel-loader 运行 webpack 时，它不起作用。

.babelrc

{
    "presets": ["env"]
}

webpack.config.js

module.exports = {
    entry: __dirname + '/src/index.js',
    output: {
        filename: 'bundle.js',
        publicPath: '/dist',
        path: __dirname + '/dist'
    },
    module: {
        loaders: [
            {
                test: /\.js?/,
                include: __dirname + 'src',
                loader: 'babel-loader'
            }
        ]
    },
    devServer: {
        inline: true,
        port: 8080,
        historyApiFallback: {
            index: 'index.html'
        }
    }
}

Answer 1

我遇到了类似的问题，这就是我发现的。在 .babelrc

中设置 debug 选项

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "IE >= 8"]
      },
      "debug": true
    }]
  ]
}

显示浏览器有效:

Using targets: { "chrome": "61", "android": "4.4.3", "edge": "15", "firefox": "56", "ie": "8", "ios": "10.3", "safari": "10.1" }

Modules transform: commonjs

Using plugins: check-es2015-constants {"android":"4.4.3","ie":"8"}
transform-es2015-arrow-functions {"android":"4.4.3","ie":"8"}
transform-es2015-block-scoped-functions {"android":"4.4.3","ie":"8"}
transform-es2015-block-scoping {"android":"4.4.3","ie":"8"}
transform-es2015-classes {"android":"4.4.3","ie":"8"}
transform-es2015-computed-properties {"android":"4.4.3","ie":"8"}
transform-es2015-destructuring {"android":"4.4.3","edge":"15","ie":"8"}
transform-es2015-duplicate-keys {"android":"4.4.3","ie":"8"}
transform-es2015-for-of {"android":"4.4.3","ie":"8"}
transform-es2015-function-name {"android":"4.4.3","edge":"15","ie":"8"} ...

我的 webpack 配置看起来只是

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }
}

但这并不能解决所有问题。调查转译后的分配，我找不到一些预期的东西，比如 Array.prototype.reduce 的 polyfill 应该为 IE 8 进行 polyfill。但这个想法是(据我所知)它不是babel-core 转译器的责任。我们需要使用 babel-polyfill或 core-js .因此，在 webpack 配置中进行 polyfilling 是一项单独的任务，在 .babelrc 中设置 browsers 选项只是故事的一部分。

另请参阅 GitHub 上的相关主题和 StackOverflow .