Question

当我使用Babel＆Webpack编译ES6时，在IE11中出现此错误：

“对象不支持属性或方法'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（）错误

1 个答案: