带有 babel-preset-env “最后 2 个版本”的 webpack 和 Internet Explorer答案

【问题标题】：webpack with babel-preset-env "last 2 versions" with internet explorer带有 babel-preset-env “最后 2 个版本”的 webpack 和 Internet Explorer
【发布时间】：2018-03-04 03:19:13
【问题描述】：

也许我有点天真。 babel-preset-env 上的 README

https://github.com/babel/babel-preset-env

说：

通过根据目标浏览器或运行时环境自动确定所需的 Babel 插件和 polyfill，将 ES2015+ 编译为 ES5 的 Babel 预设。

然而，IE11 对反引号和 promies 感到窒息，因为 webpack/babel 既没有将反引号模板转换为常规字符串，也没有提供 promise polyfill。

我正在使用 webpack 3.4.1 和 babel-core 6.2.5。

什么是我没有到达这里？

这是我用于 babel 的 webpack 配置的 use 部分：

    use: [{
      loader: 'babel-loader',
      options: {
        presets: [
          [
            'env',
            {
              targets: {
                browsers: [
                  'last 2 versions'
                ]
              },
              modules: false
            }
          ]
        ],
        plugins: [
          'transform-runtime',
          'syntax-dynamic-import'
        ]
      }
    }]

【问题讨论】：

你有没有找到解决方案，我怀疑它可能与 treeshaking 有关
@Jax Cavalera 不，很遗憾没有。从那以后，我对我的 webpack 文件进行了大量更改，该文件已经变得非常大。最终我让它工作了，我希望我知道为什么。我对 webpack 不是很满意。我开始的每个项目，都会遇到新的——有时甚至是老的——问题。这有点令人失望。不过，目前我正在研究parcel js：parceljs.org 更改似乎更简单一些。
我弄明白了为什么它对我来说坏了，stripAnsi 的开发人员有箭头函数不能转换，而 webpack-dev-server 使用它，所以你得到的是像 ie11 这样的浏览器的问题死，对我来说修复是指定使用 webpack-dev-server 的 2.9.7 版本。至于整个承诺不起作用，我最终使用了带有 es6-promise-promise 的 ProvidePlugin 来解决问题。

标签： webpack internet-explorer-11 babeljs

【解决方案1】：

我用头撞墙了 2 天，因为 babel 根本没有转译任何东西！最后我找到了罪魁祸首：根本就是那个 babel-loader wasn't reading .babelrc。迁移到babel.config.js babel-loader 后，现在可以正确使用指定的预设和 polyfill。

我的工作 babel.config.js 配置为 @babel/core 7、@babel/present-env 7、@babel/polyfill 7、babel-loader 8：

module.exports = function (api) {
api.cache(true);

return {
    presets: [
      [
        '@babel/env', {
          useBuiltIns: 'entry',
        },
      ],
    ],
  };
};

【讨论】：