javascript - Webpack babel-loader 不读取 .babelrc（支持旧浏览器）

Question

当我自己运行 babel 时，它会.babelrc按预期读取和编译。但是，当我使用 运行 webpack 时babel-loader，输出的代码与原始代码非常相似，但我希望它可以在旧版浏览器中运行。

.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

我遇到了类似的问题，这就是我发现的。在中设置debug选项.babelrc

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

表明浏览有效：

使用目标：{“chrome”：“61”，“android”：“4.4.3”，“edge”：“15”，“firefox”：“56”，“ie”：“8”，“ios”： “10.3”，“野生动物园”：“10.1”}

模块转换：commonjs

使用插件：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-scoped {"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'
    }
}

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

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

Answer 2

事实上，babel-loader 会在转译文件目录中找到 .babelrc 文件，而不是你的项目目录。所以你应该在 webpack.config.js 文件中写 babelrc 和 .babelrc 文件的路径

Answer 3

编辑webpack.config.js并删除了.babelrc.

https://webpack.js.org/loaders/babel-loader/

webpack.config.js

module.exports = {
    entry: __dirname + '/src/index.js',
    output: {
        filename: 'bundle.js',
        publicPath: '/dist',
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            }
        ]
    },
    devServer: {
        inline: true,
        port: 8080,
        historyApiFallback: {
            index: 'index.html'
        }
    }
}