如何正确初始化 ionics“自动延迟加载”模板组件？

问题描述 投票：0回答：1

TLDR；我想使用 

@ionic/core
npm 包而不是 
initialize()
一次性初始化所有组件，并且对于每个组件 
defineCustomElement()

我开始深入研究没有框架的 ionic（普通 Web 组件）和 

npm i
@ionic/core
包。它的文档说它有一些“自动延迟加载”模板组件，可以通过包含相应的脚本标签来开箱即用（找到文档here）。这可以正常工作，例如：

<!DOCTYPE html>
<html class="hydrated">
  <head>
    <meta charset="utf-8" />
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"
    ></script>
    <script
      nomodule
      src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"
    ></script>
    <link
      href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <ion-button>Hello Button</ion-button>
  </body>
</html>

也可以从 

@ionic/core/components
导入，然后手动初始化，效果很好：

import { initialize } from "@ionic/core/components";
import { defineCustomElement } from "@ionic/core/components/ion-button";

initialize();//initializes ionic and prepares the html
defineCustomElement();//initializes a certain type of element

据说后者特别适用于使用 webpack 等捆绑程序的项目，因为只有那些组件才会包含在所使用的包中。 虽然我理解这是为什么，但我不希望它出现在我的项目中。我希望所有组件都像第一个示例中那样初始化，但我不想使用 CDN，我想使用 npm 包，并且只调用一次像 

initialize
这样的函数。由于 CDN 和 npm 包据说是相同的，我以为我可以只关注路径 
@ionic/core/dist/ionic/ionic.esm.js
但显然这个文件在我的 
node_modules
中不存在。现在我有点卡住了。有人建议我如何才能完成这项工作吗？

我不想使用 CDN，因为我在项目中使用了很多其他库，并通过 npm 管理所有内容，如果知道我有这个需要特殊处理的单一依赖项，我会很烦恼。除此之外，我计划使用电容器为 iOS 和 Android 原生构建，但没有经验，并且不确定 CDN 的使用是否会在应用程序的离线功能方面产生问题。

javascript ionic-framework web-component stenciljs
1个回答
0
投票

查看 Stencil 文档以了解它们如何工作以及它们如何分发和初始化。我对 Ionic 的组件不是特别熟悉，但

ionic.esm.js
参考表明它是一个标准的 Stencil 库，通过 ionic.esm.js 管理延迟加载。该文件将根据页面的 DOM 有选择地动态加载与 ionic.esm.js 一起部署的任意数量的其他文件。没有什么可以阻止您自己将该库与应用程序的其余部分一起捆绑/部署 - 您只需要更改 ionic.esm.js 的源路径。但是，如果您想让应用程序加载/初始化组件，您可能需要克隆项目并使用 dist-custom-elements 输出目标重建它，并将它们与任何初始化一起包含在您的应用程序部署中。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.