javascript - 有没有为 IE11 设置 babel/webpack 的简单来源？

Question

我正在寻求使用 babel/webpack 将 es6 转换为 es5 的帮助，但一无所获。如果已经有答案，请告诉我。

package.json:

"dependencies": {
  "@babel/polyfill": "^7.0.0",
  "browserslist": "^4.4.1",
  ...
"devDependencies": {
  "@babel/preset-env": "^7.3.1",
  "eslint": "^5.1.0",
  ...

webpack.config.js:

const path = require('path');

const CleanPlugin = require('clean-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
    entry: {
        App: ['@babel/polyfill', './app.js'],
        Library: ['@babel/polyfill', './codegen/library.js'],
        CalculatorPage: ['@babel/polyfill', './calculator-page.js'],
        CalculatorPageExternal: ['@babel/polyfill', './calculator-page-external.js']
    },
    output: {
        path: path.resolve(__dirname, 'static'),
        filename: 'Calc.[name].[chunkhash].js',
        library: [ 'Calc', '[name]' ]
    }

app.js:

require("@babel/polyfill");
...

.babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["IE >= 10"]
        }
      }
    ]
  ]
}

到目前为止，这对 webpack 运行时生成的内容没有任何改变。

我知道之前已经有人问过有关此问题的问题 - 但似乎每个答案都针对该人的用例，以至于我很难找到“这就是如何使用 babel 将 esNext 转换为 es5”的单一来源和 webpack。”

我缺少什么/需要做什么才能使其真正生成 es5 兼容代码？

Answer 1

rules.loaders是您正在搜索的 webpack key 。

使用 babel-loader 和 @babel/preset-env (预设用于填充/转换所有年度 EcmaScript 规范，无需对特定规范进行微观管理，例如 ES6)你将能够实现这一目标。