Javascript 有没有一种方法可以在本地将模具组件集成到框架中而不发布到NPM？

我目前正在测试stencil js。目前，我想编写模具组件，并将其包含在VUE/React项目中。stencil的官方网站已经展示了如何将它们集成到一个框架中（）。但他们假设您自己的模具组件库已经发布到npm

有没有一种方法可以将模具组件本地集成到一个框架中，以便在不首先发布它们的情况下对其进行测试？是的，您可以使用它

cd我的组件库
npm链路
cd../my app
npm link my component lib#或任何您在package.json中命名的项目

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

---

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

您可以利用此功能，而不是发布或打包包件

这允许您像编写已发布包一样编写导入语句，但幕后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组件的路径

，到生成的React组件的路径，这些组件作为

ui组件React

公开，以及生成的loader

ui组件/loader

，它提供了自定义元素和React包装之间的桥梁

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

---

请注意，此答案基于

@stencil/core 1.14.0

或以下版本。未来版本可能会采用不同的方法生成框架集成。

对于本地集成，您可以参考

www/build

文件夹中的

esm.js

文件，该文件可用于Vue/React项目的head标记

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

模具组件

-模具组件

模具反应

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

一旦通过

npm run start

运行模具组件，它将以3333为主机（默认情况下）。 在

stencil react

的

index.html

的标题中包含以下行将集成组件，并在更改时实时重新加载

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

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