Полимер не загружает веб-компонент ts полимерной подачей
Следуйте руководству LitElement здесь: https://lit-element.polymer-project.org/guide/start
Я буквально следую за ним по книгам, а затем бегу
polymer serve в корневом каталоге проекта.
Я даже копировал/вставлял каждый файл из их примеров страниц stackblitz. Я не должен использовать полимерную подачу или что-то в этом роде?
Все, что я получаю, это пустая страница, и, похоже, она не распознает customElement
мой-element.ts:
import { LitElement, html, customElement, property } from 'lit-element';
@customElement('my-element')
export class MyElement extends LitElement {
@property()
foo = 'foo';
render() {
return html`
<p>hi!</p>
`;
}
}
index.ts:
import './my-element.ts';
индекс.html:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<meta http-equiv = "X-UA-Compatible" content = "ie=edge" />
<script src = "/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src = "/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<title>lit-element code sample</title>
</head>
<body>
<my-element></my-element>
</body>
</html>
пакет.json:
{
"name": "my-app",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"@webcomponents/webcomponentsjs": "^2.2.10",
"lit-element": "^2.1.0"
}
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
I even copy/pasted over every file from their example stackblitz pages
На самом деле проекты Stackblitz TS следуют определенной структуре, в которой index.ts рассматривается как точка входа кода TypeScript, автоматически компилируется и импортируется в окончательный результат.
Локальный сценарий совсем другой: вам нужно выбрать инструмент сборки для компиляции файлов TS и импортировать результат в index.html:
<!DOCTYPE html>
<html lang = "en">
<head>
<!-- ... -->
<!-- This may differ depending on your build configuration -->
<script src = "./path/to/my-element.js" type = "module"></script>
</head>
<body>
<my-element></my-element>
</body>
</html>
Вы можете использовать tsc напрямую или сборщик модулей, например Вебпак + ts-загрузчик или Rollup + rollup-plugin-typescript2. Это действительно зависит от сложности и требований ваших проектов и от того, какие браузеры вы хотите поддерживать.
Отказано в выполнении сценария из 'локальный: 8081/index.ts', поскольку его MIME-тип ('video/mp2t') не является исполняемым. Так что я предполагаю, что ему не нравится тот факт, что я даю ему машинописный файл. Я делаю src = "./my-element.ts". Нужно ли мне настраивать всю конфигурацию сборки/пакета, чтобы заставить его работать с ts?
Да, браузеры не понимают .ts файлы: их нужно компилировать в js. Я обновил ответ, добавив немного контекста в компиляторы/связки. Скажите, если вам нужна дополнительная информация
Ах, хорошо, это было мое самое большое замешательство относительно того, как они сделали это без этого тега сценария.