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

Question

当我使用 Babel 和 Webpack 转译 ES6 时，我在 IE11 中遇到这个错误：

“Object doesn't support property or method 'append'”

我浏览了互联网并在此处找到了解决方案：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 is missing

(2) What babel-polyfill doesn't include

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

Error with method ParentNode.append() transpiling ES6 with Babel & Webpack

javascript

ecmascript-6

internet-explorer-11

webpack

babeljs