为什么 webpack 将“-es5”和“es2015”附加到我的 Typescript 文件中？

Question

Webpack 正在将我的 typescript 文件转换为 Javascript 文件，但它会将 -es5 附加到名称中。例如，我希望文件被称为background.js，但它渲染出 4 个文件：

• background-es5.js
• background-es5.js.map
• background-es2015.js
• background-es2015.js.map

这是我的 Webpack 文件custom-webpack.config.js：

const ExtensionReloader = require('webpack-extension-reloader')

module.exports = {
  entry: {
    "background/background":
        "src/background/background.ts",
  },
  mode: 'development',
  plugins: [new ExtensionReloader({
    reloadPage: true,
    entries: {
        background: 'background/background'
    }
  })
]
};

这是我的 browserlist 文件：

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

Answer 1

检查您的 .browserlistrc 文件。如果你的目标是 IE11，这就可以解释为什么 Angular 会输出两个包——一个用于旧版浏览器，一个用于现代浏览器。

Angular 使用差异加载在运行时加载正确的包：

例如，使用nomodule 属性：

<script src="runtime-es2015.f790d2b83f74a52615e1.js" type="module"></script>
<script src="runtime-es5.f790d2b83f74a52615e1.js" nomodule defer></script>

如果是这种情况，您可以通过注释掉 IE 11 这一行来解决此问题

另外，请检查您的 tsconfig.json 文件。确保您的目标是 es2017：

   compilerOptions: {
      target: 'es2017'
   }

如果你的目标是 es5，那也可以解释一下。