Как создать пользовательский компонент трафарета с помощью Ionic PWA Starter Kit
Я просто запускаю команду:
$ npx create-stencil ionic-pwa
который создал ваниль Ionic 4 PWA со следующей структурой каталога внутри каталога: src:
.
├── assets
│ └── icon
│ ├── favicon.ico
│ └── icon.png
├── components
│ ├── app-home
│ │ ├── app-home.css
│ │ ├── app-home.spec.ts
│ │ └── app-home.tsx
│ ├── app-profile
│ │ ├── app-profile.css
│ │ ├── app-profile.spec.ts
│ │ └── app-profile.tsx
│ └── my-app
│ ├── my-app.css
│ ├── my-app.spec.ts
│ └── my-app.tsx
├── components.d.ts
├── global
│ ├── app.css
│ └── app.ts
├── helpers
│ └── utils.ts
├── index.html
├── manifest.json
└── sw.js
Затем я хочу создать пользовательский компонент с HTML-тегом: comp-workspace и имя файла: comp-workspace.js (или что-то подобное), что я могу вставить в любой ваниль HTML/Javascript страница без использования каких-либо Ja vascript Framework.
Здесь следует принять во внимание некоторые вещи:
составная часть:
comp-workspaceможет включать в себя следующие компоненты: {comp-gallery,comp-artboard,comp-text-editor,comp-layer-stack}.все вышеперечисленные компоненты могут включать стандартные
Ionicкомпоненты.
Пожалуйста, взгляните на следующую диаграмму:
Вот структура каталогов после добавления моего пользовательского компонента: comp-workspace и его зависимости.
.
├── assets
│ └── icon
│ ├── favicon.ico
│ └── icon.png
├── components
│ ├── app-home
│ │ ├── app-home.css
│ │ ├── app-home.spec.ts
│ │ └── app-home.tsx
│ ├── app-profile
│ │ ├── app-profile.css
│ │ ├── app-profile.spec.ts
│ │ └── app-profile.tsx
│ ├── comp-workspace
│ │ ├── comp-workspace.css
│ │ ├── comp-workspace.spec.ts
│ │ └── comp-workspace.tsx
│ ├── comp-gallery
│ │ ├── comp-gallery.css
│ │ ├── comp-gallery.spec.ts
│ │ └── comp-gallery.tsx
│ ├── comp-artboard
│ │ ├── comp-artboard.css
│ │ ├── comp-artboard.spec.ts
│ │ └── comp-artboard.tsx
│ ├── comp-text-editor
│ │ ├── comp-text-editor.css
│ │ ├── comp-text-editor.spec.ts
│ │ └── comp-text-editor.tsx
│ ├── comp-layer-stack
│ │ ├── comp-layer-stack.css
│ │ ├── comp-layer-stack.spec.ts
│ │ └── comp-layer-stack.tsx
│ └── my-app
│ ├── my-app.css
│ ├── my-app.spec.ts
│ └── my-app.tsx
├── components.d.ts
├── global
│ ├── app.css
│ └── app.ts
├── helpers
│ └── utils.ts
├── index.html
├── manifest.json
└── sw.js
Затем я хочу использовать свой пользовательский компонент способом, аналогичным следующему:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Title of the document</title>
<script src="..."></script>
<script src="https://my.repository.com/components/comp-workspace.js"></script>
</head>
<body>
<comp-workspace attr1="..." attr2="..." attr3="..." ...></comp-workspace>
</body>
</html>
Если я бегу build По команде на консоли я получаю следующий вывод:
$ npm run build
> @ionic/pwa-toolkit@0.0.1 build D:\stencil-lab
> stencil build
[25:03.5] @stencil/core v0.12.1
[25:03.9] build, app, prod mode, started ...
[25:06.3] transpile started ...
[25:12.3] transpile finished in 6.02 s
[25:15.5] module map started ...
[25:15.5] generate styles started ...
[25:26.0] compile global style start ...
[25:28.0] compile global style finish in 2.03 s
[25:28.0] generate styles finished in 12.50 s
[25:28.0] module map finished in 12.50 s
[25:28.0] generate bundles started ...
[25:28.2] generate bundles finished in 237 ms
[25:28.2] generate app files started ...
[25:29.6] generate app files finished in 1.36 s
[26:03.4] inject manifest into service worker started ...
[26:08.5] inject manifest into service worker finished in 5.04 s
[ WARN ] build warn
Generated an empty bundle
[26:08.5] build finished in 64.58 s
Я также получаю новый каталог: www со следующим содержанием:
.
├── assets
│ └── icon
│ ├── favicon.ico
│ └── icon.png
├── build
│ ├── app
│ │ ├── 3hkybzk1.es5.js
│ │ ├── 3hkybzk1.js
│ │ ├── 3hkybzk1.sc.es5.js
│ │ ├── 3hkybzk1.sc.js
│ │ ├── 4jakisfl.es5.js
│ │ ├── 4jakisfl.js
│ │ ├── 4jakisfl.sc.es5.js
│ │ ├── 4jakisfl.sc.js
│ │ ├── aa33sq6q.es5.js
│ │ ├── aa33sq6q.js
│ │ ├── [... AND MANY MORE FILES]
│ │ └── svg
│ │ ├── index.js
│ │ ├── ios-add-circle-outline.svg
│ │ ├── ios-add-circle.svg
│ │ ├── ios-add.svg
│ │ ├── ios-airplane.svg
│ │ ├── ios-alarm.svg
│ │ ├── ios-albums.svg
│ │ ├── ios-alert.svg
│ │ ├── ios-american-football.svg
│ │ ├── ios-analytics.svg
│ │ └── [... AND MANY MORE FILES]
│ ├── app.css
│ └── app.js
├── index.html
├── manifest.json
├── sw.js
└── workbox-v3.4.1
├── workbox-background-sync.dev.js
├── workbox-background-sync.dev.js.map
├── workbox-background-sync.prod.js
├── workbox-background-sync.prod.js.map
├── workbox-broadcast-cache-update.dev.js
├── workbox-broadcast-cache-update.dev.js.map
├── workbox-broadcast-cache-update.prod.js
├── workbox-broadcast-cache-update.prod.js.map
├── workbox-cache-expiration.dev.js
├── workbox-cache-expiration.dev.js.map
└── [... AND MANY MORE FILES]
6 directories, 832 files
но, как вы можете видеть, я не получаю фактический файл комплекта Ja vaScript, который я могу использовать, чтобы вставить свой пользовательский компонент в любой ваниль HTML/Javascript стр.
Мой вопрос: как мне build только мой пользовательский компонент внутри этого Ionic 4 PWA приложение?
Спасибо!
[РЕДАКТИРОВАТЬ 1]
Это ответ на комментарий Александра Старосельского ниже, где он говорит:
Вы можете использовать что-то вроде stencil-component-starter для создания отдельных веб-компонентов, которые можно эффективно объединять и использовать в любом месте.
Это хороший момент, Александр, и на самом деле это была моя первоначальная идея, но я обнаружил некоторые проблемы, которые я разместил на этом форуме:
Аарон Сондерс сказал там (по состоянию на 2018-08-28):
Похоже, что этот проект (stencil-component-starter) не имеет
Ionic 4в нем по умолчанию.
Затем он предложил мне использовать Ionic PWA Starter Kit проект, и это то, что я пытался сделать здесь. Делая так, кажется, все работает хорошо (все Ionic компоненты работают), но теперь мне просто нужно скомпилировать только мой пользовательский компонент в отдельный файл.
Вот то же самое обсуждение параллельно в Stackru:
компонент ионной метки внутри шаблона трафарета-компонента-стартера не отображается
Есть идеи?