Расширение HTMLElement: сбой конструктора при использовании webpack

Ответ 1

Это пронизывающий вопрос. Если вы переносите или используете ES5, вам нужно связать native-shim для браузеров с поддержкой собственных веб-компонентов. (https://github.com/webcomponents/custom-elements/blob/master/src/native-shim.js)

Классы в стиле ES5 не работают с собственными пользовательскими элементами, поскольку конструктор HTMLElement использует значение new.target для поиска определения пользовательского элемента для вызываемого в данный момент конструктора. new.target устанавливается только при вызове new и распространяется только через вызовы super(). super() не эмулируется в ES5. Шаблон 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

Ответ 2

Классы классов ES5 не работают с собственными пользовательскими элементами

Чтобы сделать работу, просто измените цель в файле tsconfig.json на es6.

Ответ 3

Я исправил эту проблему с помощью этой проблемы - https://github.com/facebook/create-react-app/issues/3225

В основном я установил эти 2 плагина через npm и в своем конфиге WebPack добавил эти 2 плагина для 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']
            },
        }
    ],

Ответ 4

Вы уверены, что это работает без webpack? Запуск его через игровую площадку дает ту же ошибку, что и вы описали (во время выполнения).

Во всяком случае, вы не должны расширять HTMLElement.
HTMLElement на самом деле является интерфейсом в typescript, поэтому, если что-то вам нужно реализовать как таковое.
Он существует как тип объекта в браузере, но он не был объявлен как класс typescript, поэтому typescript не может его правильно расширять.

О способах решения этой проблемы см. этот ответ.

Ответ 5

Конфигурация 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/
    }
  ]
}

Использование плагина transform-es2015-classes нарушит процесс сборки при использовании Babel 7, так как babel-preset-env уже содержит его. @babel/plugin-proposal-class-properties необходим для обратных вызовов жизненного цикла. Использование ежегодных предустановок, таких как es2015, не рекомендуется в Babel 7, вместо этого используйте @babel/preset-env.

Ответ 6

1) Бабель 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']
                }
            }
        ]
    }
};

Итак, в основном я говорю веб-пакету перенести любой файл .js в мою папку /app/scripts и сохранить их в /dist/scripts, используя babel-loader, с пакетом @babel/preset-env.

2) Вавилон 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"]
            }
        }
    ]
}