Question

我目前正在测试模板js。现在，我想编写模具组件并将它们包含在VUE / React项目中。模具的官方网站已经显示了如何将它们集成到框架（https://stenciljs.com/docs/overview）中。但是他们假设您自己的模板组件库已经发布到npm。

是否有一种方法可以将模版组件本地集成到框架中以测试它们而无需先发布它们？

Answer 1

是的，您可以使用npm-link。

cd my-component-lib
npm link

cd ../my-app
npm link my-component-lib # or whatever you have named the project in package.json

如果您对此有任何疑问（例如，路径解析不正确），也可以尝试使用npm-pack打包您的软件包并安装打包版本：

cd my-component-lib
npm pack

cd ../my-app
npm install ../my-component-lib/my-component-lib-1.0.0.tgz

链接是可取的，因为对组件库的更改将立即（在重建之后）反映出来，而对于打包，您必须在对lib进行每次更改后重新打包并重新安装它。

Answer 2

您可以利用TypeScript's path mapping feature来代替发布或打包软件包。

这使您可以像使用已发布的程序包一样编写导入语句，但是在后台TypeScript会将导入映射到其给定的源代码位置。

这是tsconfig.json的示例，其中已将路径映射添加到编译器选项中：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "ui-components": ["libs/ui-components"],
      "ui-components/loader": ["libs/ui-components/dist/loader/index.cjs.js"],
      "ui-components-react": ["generated/ui-components-react/src/components.ts"]
    },
    ...

如您所见，它具有3个映射：核心模板组件ui-components的路径，生成为ui-components-react的生成的React组件的路径以及生成的加载器{ {1}}提供了Custom元素和React包装器之间的桥梁。

我为Stencil Web Components创建了一个完整的工作示例，该示例具有为React生成的绑定和包装，而无需发布任何包：Nx Stencil React。

请注意，此答案基于ui-components/loader或以下。将来的版本可能会采用不同的方法来生成框架集成。

Answer 3

对于本地集成，您可以引用 esm.js 文件夹中的 www/build 文件，该文件可用于 Vue/React 项目的 head 标签。

例如，如果您有以下 2 个应用程序

stencil-components - 模板组件

stencil-react - 将消耗组件的示例反应应用程序。

一旦您通过 npm run start 运行 stencil-components，它将托管在 3333（默认情况下）。在 index.html 的 stencil-react 的 head 中包含以下行将集成组件，并在更改时实时重新加载。

<script type="module" src="http://localhost:3333/build/stencil-components.esm.js"></script>

有没有办法在不发布到NPM的情况下将模板组件本地集成到框架中？

3 个答案: