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

Question

我目前正在测试模板 js。现在我想编写模板组件并将它们包含在 VUE/React 项目中。stencil 的官方网站已经展示了如何将它们集成到一个框架中（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

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

Answer 2

您可以使用TypeScript 的路径映射功能，而不是发布或打包您的包。

这允许您像使用已发布的包一样编写导入语句，但在幕后 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 个映射：核心 Stencil 组件ui-components的路径，生成的 React 组件的路径，暴露为ui-components-react，以及生成的加载器ui-components/loader，它提供了自定义元素和 React 包装器之间的桥梁。

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

请注意，此答案基于@stencil/core 1.14.0或低于。未来的版本可能会采用不同的方法来生成框架集成。