是否有一个简单的来源来为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运行时生成的内容一无所知。

我以前曾问过有关此问题的问题 - 但似乎每个答案都非常具体，以至于我很难找到一个单一的来源"这就是您如何将Esnext转换为Es5"，而Babel则和webpack。"

我缺少什么/需要做什么才能使它实际生成ES5兼容代码？

Answer 1

rules.loaders是您要搜索的webpack键。

使用 babel-loader和 @babel/preset-env（用于polyfill-ing/转换所有年度ecmascript规格的预设，而无需微观管理特定规格，例如ES6）

您需要将预设配置为浏览器也需要定位。

使用以下内容：

[
        '@babel/preset-env',
        {
          targets: {
            browsers: ["IE 11"],
          },
        useBuiltIns: 'usage'
        }
]