Question

当我自己运行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'
        }
    }
}

Answer 1

修改了list_string1 = ["This is a string that I want."] list_string2 = ["this is also a string that I want!"] list_string3 = ["and this"] list_string4 = ["and also this one!!"]并删除了webpack.config.js。

<强> webpack.config.js

.babelrc

Answer 2

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

中设置.babelrc选项

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

显示浏览器有效：

使用目标：{＆＃34; chrome＆＃34;：＆＃34; 61＆＃34;，＆＃34; android＆＃34;：＆＃34; 4.4.3＆＃34;，＆＃34; edge＆＃34 ;:   ＆＃34; 15＆＃34;，＆＃34; firefox＆＃34;：＆＃34; 56＆＃34;，＆＃34; ie＆＃34;：＆＃34; 8＆＃34;，＆＃34; ios＆＃34;：＆＃34; 10.3＆＃34;，＆＃34; safari＆＃34;：   ＆＃34; 10.1＆＃34; }

模块转换：commonjs

使用插件：check-es2015-constants {＆＃34; android＆＃34;：＆＃34; 4.4.3＆＃34;，＆＃34; ie＆＃34;：＆＃34; 8＆＃34;}
  transform-es2015-arrow-functions {＆＃34; android＆＃34;：＆＃34; 4.4.3＆＃34;，＆＃34; ie＆＃34;：＆＃34; 8＆＃34;}
  transform-es2015-block-scoped-functions {＆＃34; android＆＃34;：＆＃34; 4.4.3＆＃34;，＆＃34; ie＆＃34;：＆＃34; 8＆＃34;}
  transform-es2015-block-scoping {＆＃34; android＆＃34;：＆＃34; 4.4.3＆＃34;，＆＃34; ie＆＃34;：＆＃34; 8＆＃34;}
  transform-es2015-classes {＆＃34; android＆＃34;：＆＃34; 4.4.3＆＃34;，＆＃34; ie＆＃34;：＆＃34; 8＆＃34;}
  transform-es2015-computed-properties {＆＃34; android＆＃34;：＆＃34; 4.4.3＆＃34;，＆＃34; ie＆＃34;：＆＃34; 8＆＃34;}
  变换ES2015-解构   {＆＃34;机器人＆＃34;：＆＃34; 4.4.3＆＃34;＆＃34;边缘＆＃34;：＆＃34; 15＆＃34;＆＃34;即＆＃34;：＆＃ 34; 8＆＃34;}
  transform-es2015-duplicate-keys {＆＃34; android＆＃34;：＆＃34; 4.4.3＆＃34;，＆＃34; ie＆＃34;：＆＃34; 8＆＃34;}
  transform-es2015-for-of {＆＃34; android＆＃34;：＆＃34; 4.4.3＆＃34;，＆＃34; ie＆＃34;：＆＃34; 8＆＃34;}
  变换ES2015功能名称   {＆＃34;机器人＆＃34;：＆＃34; 4.4.3＆＃34;＆＃34;边缘＆＃34;：＆＃34; 15＆＃34;＆＃34;即＆＃34;：＆＃ 34; 8＆＃34;}   ...

我的webpack配置看起来只是

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

但这并不能解决所有问题。调查已转换的分布，我找不到像Array.prototype.reduce这样的polyfill应该为IE 8填充的预期内容。但是这个想法是（我可以理解）它不是{{1}的责任。 } transpiler。我们需要使用babel-polyfill或core-js。因此，在webpack配置中填充是一项单独的任务，在babel-core中设置browsers选项只是故事的一部分。

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

Answer 3

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

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

3 个答案: