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

【问题标题】：Webpack babel-loader isn't reading .babelrc (supporting old browsers)Webpack babel-loader 不读取 .babelrc（支持旧浏览器）
【发布时间】：2018-04-16 20:58:46
【问题描述】：

当我自己运行 babel 时，它会读取 .babelrc 并按预期进行转换。但是，当我使用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'
        }
    }
}

【问题讨论】：

如果我没记错的话，应该是直接targets，没有那个browsers。您也可以在.browserslistrc 处定义浏览器以达到相同的效果。
没关系。试试.browserslistrc。它应该把它捡起来。
另外请记住，您当前的浏览器定义不会包含很多旧浏览器。如果你想支持 IE 11，你应该把它包含在里面。
@JuhoVepsäläinen webpack 仍然没有选择 .babelrc，即使我只使用了 env 预设并且没有浏览器列表选项
webpack.config.js 和 .babelrc 放在哪里。你在哪里运行 webpack？

标签： javascript webpack babeljs babel-loader

【解决方案1】：

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

{
  "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”、“safari”： “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"}
转换-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"}
转换-es2015-解构 {"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"}
转换-es2015-函数名 {"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 配置中进行 polyfill 是一项单独的任务，在 .babelrc 中设置 browsers 选项只是故事的一部分。

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

【讨论】：

【解决方案2】：

编辑了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'
        }
    }
}

【讨论】：

有问题的是，您在 module.loaders [{...}] 中定义加载，而在答案中，您正在使用 module.rules[{...}] ，这两种语法是否做同样的事情！！
我猜loaders 是 v1 而rules 是 v2+。 stackoverflow.com/questions/43002099/…

【解决方案3】：

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

【讨论】：