Question

我将以下TypeScript程序转换为ES5：

文件1：

class BaseElement extends HTMLElement {
    constructor() {
        super();
    }
}

文件2：

import {BaseElement} from './BaseElement';

class MyElement extends BaseElement {
    constructor() {
        super();
    }
}

var el = new MyElement();

将所有内容手动放入文件中，代码工作正常并在浏览器中执行，HTMLElement构造没有问题。但是，只要我通过webpack打包它，我就会收到以下错误消息：

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

没有webpack，构造了以下JS代码：

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var BaseElement = (function (_super) {
    __extends(BaseElement, _super);
    function BaseElement() {
        _super.call(this);
    }
    return BaseElement;
}(HTMLElement));
var MyElement = (function (_super) {
    __extends(MyElement, _super);
    function MyElement() {
        _super.call(this);
    }
    MyElement.prototype.createdCallback = function () {
        this.innerHTML = "lol";
    };
    return MyElement;
}(BaseElement));
var el = new MyElement();

使用webpack，构造以下代码：

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(1);
    __webpack_require__(2);

/***/ },
/* 1 */
/***/ function(module, exports) {

    "use strict";
    var BaseElement = (function (_super) {
        __extends(BaseElement, _super);
        function BaseElement() {
            _super.call(this);
        }
        return BaseElement;
    }(HTMLElement));
    exports.BaseElement = BaseElement;


/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {

    "use strict";
    var BaseElement_1 = __webpack_require__(1);
    var MyElement = (function (_super) {
        __extends(MyElement, _super);
        function MyElement() {
            _super.call(this);
        }
        MyElement.prototype.createdCallback = function () {
            this.innerHTML = "lol";
        };
        return MyElement;
    }(BaseElement_1.BaseElement));
    exports.MyElement = MyElement;
    // TODO: inject
    var p = new MyElement();
/***/ }
/******/ ]);

基本上，webpack将任何模块放入一个函数中并在它们之间维护一个导出变量，但是HTMLElement的构造失败了。没有webpack（上面的代码），它可以正常工作。

有什么想法吗？

Answer 1

这是转发问题。如果您正在转换或使用ES5，那么您需要为具有本机Web组件支持的浏览器捆绑native-shim。（https://github.com/webcomponents/custom-elements/blob/master/src/native-shim.js）

ES5风格的类不能使用本机自定义元素，因为HTMLElement构造函数使用new.target的值来查找当前调用的构造函数的自定义元素定义。 new.target仅在调用new时设置，并且仅通过super（）调用传播。在ES5中，super（）不可模拟。 SuperClass.call(this)`` only works when extending other ES5-style classes, and does not propagate new.target`。
的模式

检查问题讨论https://github.com/webcomponents/custom-elements/issues/29

Answer 2

ES5样式的课程不适用于原生自定义元素

要解决此问题，只需将tsconfig.json文件中的目标更改为es6。

Answer 3

我借助此问题-https://github.com/facebook/create-react-app/issues/3225

解决了该问题

基本上，我通过npm安装了这两个插件，并在我的WebPack配置中为Babel添加了这两个插件：

use: [
    {
        loader: 'babel-loader',
            options: {
                presets: ['es2015'],
                // https://github.com/facebook/create-react-app/issues/3225
                plugins: ['transform-custom-element-classes', 'transform-es2015-classes']
            },
        }
    ],

Answer 4

你确定它没有webpack吗？通过playground运行它会产生与您描述的相同的错误（在运行时）。

无论如何，你不应该延长HTMLElement HTMLElement实际上是打字稿中的一个界面，所以如果有的话，你应该这样实现它它作为浏览器中的对象类型存在，但它没有被声明为typescript类，因此typescript无法正确扩展它。

有关解决此问题的方法，请参阅此answer。

Answer 5

用于Web组件的Babel 7 + Webpack 4配置：

package.json：

"devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/plugin-proposal-class-properties": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-custom-element-classes": "^0.1.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
}

webpack.config.js：

module: {
  rules: [
    {
      test: /\.js$/,
      use:{
          loader: 'babel-loader',
              options: {
                  presets: ['@babel/preset-env'],
                  plugins: [
                    "transform-custom-element-classes",
                    "@babel/plugin-proposal-class-properties",
                  ]
              },
          },
      exclude: /node_modules/
    }
  ]
}

在使用Babel 7时，使用transform-es2015-classes插件会中断构建过程，因为babel-preset-env已包含该插件。 @babel/plugin-proposal-class-properties对于生命周期回调是必需的。在Babel 7中已弃用使用es2015这样的年度预设，而改为使用@babel/preset-env。

Answer 6

1）Babel 7.6.0

就个人而言，这些特定的devDependencies错误似乎消失了：

"devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "babel-loader": "^8.0.6",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8"
}

还有这个webpack.config.js：

var glob = require('glob');
var path = require('path');

module.exports = {
    entry: glob.sync('./app/scripts/**.js').reduce(function(obj, el){
        obj[path.parse(el).name] = el;
        return obj
    },{}),
    output: {
        path: path.resolve(__dirname, './dist/scripts'),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [
                    path.resolve(__dirname, 'app/scripts')
                ],
                options: {
                    presets: ['@babel/env']
                }
            }
        ]
    }
};

因此，基本上，我是在告诉Webpack转换我/ app / scripts文件夹中的任何.js文件，并使用babel-loader和@babel/preset-env软件包将它们保存在/ dist / scripts中。

2）Babel 6。*。0

但是，如果您使用@babel/core 6.*.*，则可能需要检查此https://medium.com/@allenhwkim/chrome-browser-custom-element-error-e86db5ae3b8c。这很简单，在尝试更新我的所有babel软件包之前，我已经成功使用了它。

您需要做的“全部”是npm install babel-plugin-transform-es2015-classes babel-plugin-transform-custom-element-classes --save-dev，然后将它们添加到webpack.config.js中（不要忘记也npm install --save-dev babel-preset-es2015）：

module: {
    rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [
                path.resolve(__dirname, 'app/scripts')
            ],
            options: {
                presets: ['es2015'],
                plubins: ["transform-custom-element-classes", "transform-es2015-classes"]
            }
        }
    ]
}

扩展HTMLElement：使用webpack时构造函数失败

6 个答案: