#javascript #ecmascript-6 #web-component #stackblitz
#javascript #ecmascript-6 #веб-компонент #stackblitz
Вопрос:
Stackblitz компилирует код в es5 (или es3).
Проблема в том, что веб-компонентам нужна нотация класса для работы.
В приведенном здесь примере я пытаюсь использовать сторонние веб-компоненты @material.
Есть ли какой-либо способ сообщить stackblitz не компилировать определенные библиотеки или назначить ему целевую компиляцию в es6 (предпочтительно es2020)?
Комментарии:
1. ES6 и ES2020 — это две очень разные цели. ES6 эквивалентен ES2015, за целых пять лет до публикации ES2020.
2. Я хорошо осведомлен об этом. Суть в том, что мне нужны классы для того, чтобы мои веб-компоненты могли работать со stackblitz.
Ответ №1:
Попробуйте custom-elements-es5-adapter свой импорт или html (в зависимости от ваших потребностей).
Документы по использованию custom-elements-es5-adapter.js
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
Дополнительные примеры:
использование script src в html: Stackblitz
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
</head>
используя импорт custom-elements-es5-adapter.js : Stackblitz
// These imports must be first.
import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
// All other top-level imports should be specified here so that (a) they follow
// the polyfills and adapter and (b) so that stackblitz will convert their
// module specifiers.
import '@polymer/iron-selector/iron-selector.js';