问有没有一种方法可以在不发布到NPM的情况下将模板组件集成到本地框架中？

EN

是的，您可以使用

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

不过，链接更可取，因为对组件库的更改将立即反映(在重新构建之后)，而使用压缩，您必须在每次对库进行更改后重新打包和重新安装它。

与发布或打包您的包不同，您可以利用

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个映射:核心模板组件的路径

，生成的React组件的路径被公开为

，以及生成的加载器

它提供了Custom元素和React包装器之间的桥梁。

我为模板Web组件创建了一个完整的工作示例，它具有为React生成的绑定和包装器，无需发布任何包：

Nx模板反应

..。

请注意，此答案基于

或者更低。未来的版本可能会有不同的生成框架集成的方法。

对于本地集成，您可以引用

文件内

可以在Vue/React项目的head标签中使用的文件夹。

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

-模板组件

-示例react应用程序，它将使用组件。

一旦您通过以下方式运行模板组件

它将托管在3333 (默认情况下)。在标题中包含以下行

的

将在更改时将组件与实时重新加载集成在一起。