0

我只是运行命令：

$ 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或类似的东西），我可以在不使用任何 Javascript 框架的情况下插入任何原版HTML/页面上。Javascript

这里有一些事情需要考虑：

  1. 组件：comp-workspace可以包括以下组件：{ comp-gallery, comp-artboard, comp-text-editor, comp-layer-stack}。

  2. 以上所有组件都可以包括标准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

但正如您所见，我没有获得可用于在任何原版HTML/Javascript页面上插入自定义组件的实际 javascript 包文件。

我的问题是：我如何build从这个应用程序中只使用我的自定义组件Ionic 4 PWA？

谢谢！

[编辑 1]

这是对下面Alexander Staroselsky评论的回应，他说：

您可以考虑使用类似stencil-component-starter 的东西来构建可以在任何地方有效地捆绑和使用的单个 Web 组件。

亚历山大说得很好，实际上这是我最初的想法，但我发现了一些我在这个论坛上发布的问题：

https://forum.ionicframework.com/t/ion-label-component-inside-the-stencil-component-starter-not-getting-rendered/139763/3#post_4

亚伦·桑德斯（Aaron Saunders）在那里说（截至2018-08-28）：

看来这个项目（stencil-component-starter）Ionic 4默认情况下没有。

然后他建议我使用该Ionic PWA Starter Kit项目，这就是我在这里尝试做的。这样做似乎一切正常（所有Ionic组件都工作），但现在我只需要将我的自定义组件编译为单独的文件。

这是StackOverflow中并行的相同讨论：

模板组件启动器中的离子标签组件未呈现

有任何想法吗？

4

0 回答 0