代码之家  ›  专栏  ›  技术社区  ›  davidesp

如何使用Ionic PWA初学者工具包创建自定义模具组件

stenciljs ionic4 typescript angular javascript
  •  0
  • davidesp  · 技术社区  · 6 年前

    我只是运行命令: 

    $ 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 不使用任何Javascript框架的页面。

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

    1. 组件工作区 comp-gallery comp-artboard , comp-text-editor , comp-layer-stack

    2. Ionic 组件。

    请看下图:

    enter image description here

    以下是添加自定义组件后的目录结构: 以及它的依赖关系。 

    .
├── 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

    但正如您所看到的,我没有一个实际的javascript捆绑包文件可以用来将我的自定义组件插入到任何服务器上 HTML/Javascript 第页。

    我该怎么做 建造 只是我的自定义组件 离子型4 PWA

    谢谢!

    [编辑1]

    亚历山大·斯塔罗斯基

    你可以考虑使用 到 构建可以绑定和使用的单个web组件

    这是一个很好的观点,亚历山大,实际上这是我最初的想法,但我发现一些问题,我在这个论坛上发布:

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

    亚伦桑德斯 2018-08-28 ):

    看来这个项目( 模具组件启动器 )没有 Ionic 4 在默认情况下。

    然后他建议我用 Ionic PWA Starter Kit 这就是我在这里要做的。这样做一切似乎都很好(所有 离子型

    这里有一个同样的讨论在平行 堆栈溢出 :

    ion-label component inside the stencil-component-starter not getting rendered

    0 回复  |  直到 6 年前
    推荐文章
    Reegan  ·  使用Angular ngFor指令在html中渲染嵌套对象值
    4 月前
    user3472810  ·  Angular@Output/EventEmitter返回undefined
    4 月前
    Lorenzo Bertolaccini  ·  在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
    4 月前
    Jihed Ben Zarb  ·  造型角材料日期选择器
    5 月前
    st_clair_clarke  ·  为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数
    5 月前
    Ajay Kulkarni  ·  Angular 19-重新路由到子路由未按预期工作
    5 月前
    Ajay Kulkarni  ·  路由器与导航上的路线不匹配
    5 月前
    Jace Johnson  ·  Typescript文件读取的变量类型错误
    5 月前
    Ole  ·  Angular资源API是否支持为资源添加初始值?
    5 月前
    Ole  ·  在使用新的Angular Resource API时取消搜索术语?
    5 月前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号