使用 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 不包含的內容