使用 Babel 和 Webpack 转译 ES6 的方法 ParentNode.append() 出错

Question

当我使用 Babel 和 Webpack 转译 ES6 时，我在 IE11 中收到此错误：

“对象不支持属性或方法‘追加’”

我环顾了互联网并在这里找到了解决方案：Polyfill (developer.mozilla.org)我将该段代码粘贴到我的源 js 文件中，当使用 Babel 进行转换时，IE11 不再显示错误。 但是……

有没有办法使用 Babel 和 Webpack 进行编译，而不必像我一样手动粘贴代码？

这是我的.babelrc文件：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3,
      "debug": true
    }]
  ]
}

这是我的webpack.config.js文件：

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    entry: [
        './node_modules/core-js/stable',
        './node_modules/regenerator-runtime/runtime',
        './src/index.js'
    ],
    mode: 'development',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
            }
        }]
    },
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()],
    },
};

而且，这是我的package.json文件：

{
  "name": "Demo Project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/preset-env": "^7.7.6",
    "@babel/register": "^7.7.4",
    "babel-loader": "^8.0.6",
    "terser-webpack-plugin": "^2.3.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  "browserslist": [
    "> .05% in ES",
    "not ie <= 9"
  ],
  "dependencies": {
    "core-js": "^3.5.0",
    "regenerator-runtime": "^0.13.3"
  }
}

我需要额外的插件还是什么？ 还是我留下了什么？

不管怎样，谢谢！

Answer 1

Babel 是一个 JavaScript 编译器。 它填充了 JS 语言的特性。 但是append是一个 DOM 特性，所以它不能被 babel 填充。 您可以使用ember-cli-polyfill-io来填充 DOM。

参考：

(1) ParentNode.append polyfill 缺失

(2) babel-polyfill 不包含的内容