共享库与内部包
创建共享 UI 库和工具库，并通过 TypeScript 路径别名在各应用之间导入它们。
共享库与内部包 是 CoddyKit 上的免费 React Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
为什么需要共享库
不要在多个应用之间重复组件、钩子和工具函数，而应将它们提取到共享库项目中，供单体仓库中的任意应用使用。
生成库
使用 Nx 生成器创建具有类型支持且可构建的库项目。
# UI component library:
npx nx generate @nx/react:library ui --directory=libs/ui --importPath=@myorg/ui
# Utility library:
npx nx generate @nx/js:library utils --directory=libs/utils --importPath=@myorg/utils
# Data access library (hooks, API calls):
npx nx generate @nx/react:library data-access --importPath=@myorg/data-access库的公共 API
从单个 index.ts（公共 API）导出所有内容。使用者只能从 @myorg/ui 导入，而不应从很深的内部路径导入。
// libs/ui/src/index.ts
export { Button } from './lib/Button';
export { Card } from './lib/Card';
export { Input } from './lib/Input';
export type { ButtonProps } from './lib/Button';
// Consumer in apps/web:
import { Button, Card } from '@myorg/ui';
// NOT: import { Button } from '@myorg/ui/src/lib/Button'; // internal path库类型：可发布与可构建
可构建库会进行增量编译，从而加快单体仓库的构建速度。可发布库还会生成兼容 npm 的软件包，供外部使用。
# Buildable (monorepo internal use only):
npx nx generate @nx/react:library ui --buildable
# Publishable (for npm too):
npx nx generate @nx/react:library ui --publishable --importPath=@myorg/ui强制执行模块边界
使用 @nx/enforce-module-boundaries ESLint 规则来阻止循环依赖，并限制项目之间可以相互导入的范围。
// nx.json or .eslintrc
"depConstraints": [
// Apps can only import from libs:
{ "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] },
// Feature libs can't import other feature libs (via shared libs only):
{ "sourceTag": "type:feature", "notDependOnLibsWithTags": ["type:feature"] }
]用于共享库的 Storybook
针对 UI 库运行 Storybook，以便独立于任何应用单独记录组件。
# Generate Storybook config for the ui lib:
npx nx generate @nx/storybook:configuration ui
# Run Storybook:
npx nx storybook ui测试库
每个库都有自己的测试目标。当库发生更改时，运行该库以及所有受影响应用的测试。
# Test specific library:
npx nx test ui
# Test all affected by a change:
npx nx affected --target=test单体仓库中的版本管理
在单体仓库中，所有软件包共享一个 package.json 和一个版本。对于可发布库，请使用 @jscutlery/semver 或 Changesets 等工具管理独立版本。
将现有代码迁移到库中
逐步将共享代码移到库中：创建库、移动文件、更新导入，然后让 TypeScript 路径别名处理其余工作。
# Move a component:
# 1. Copy src/components/Button.tsx → libs/ui/src/lib/Button.tsx
# 2. Export from libs/ui/src/index.ts
# 3. Update imports across apps from relative paths to '@myorg/ui'
# 4. Delete the original file使用 Compodoc 或 Storybook Docs 编写文档
使用 Storybook 的 autodocs 标签或 Compodoc，根据库文件中的 TypeScript 类型和 JSDoc 注释生成应用程序接口文档。
快速检查
使用者从共享 Nx 库导入内容时，单一入口点应该是什么？
回顾
使用 nx generate 生成库，从单个 index.ts 导出所有内容，并使用 ESLint 规则强制执行模块边界。使用可构建库加快增量构建；需要发布到 npm 时，使用可发布库。针对 UI 库运行 Storybook，以编写隔离的文档。
常见问题解答
「共享库与内部包」课时是免费的吗？
是的 — 「共享库与内部包」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「共享库与内部包」这节课中我会学到什么？
创建共享 UI 库和工具库，并通过 TypeScript 路径别名在各应用之间导入它们。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「共享库与内部包」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。