DEV Community
·
优雅的混合 TypeScript 项目构建
内容提要
本文介绍了如何通过 TypeScript 的项目引用配置，优雅地生成 ESM 和 CJS 两种构件。作者在 Pedalboard 的 monorepo 中，使用 tsconfig.json 引用两个不同的配置文件，简化了构建脚本。通过使用 '-b' 参数，TSC 可以同时处理这两个配置，生成所需构件。
关键要点
-
本文介绍了如何通过 TypeScript 的项目引用配置生成 ESM 和 CJS 两种构件。
-
作者在 Pedalboard 的 monorepo 中使用 tsconfig.json 引用两个不同的配置文件。
-
通过使用 '-b' 参数，TSC 可以同时处理这两个配置，生成所需构件。
-
原有的构建脚本需要在 package.json 中进行复杂配置，显得有些笨重。
-
使用引用配置可以简化构建过程，避免强制类型检查。
-
新的构建脚本只需使用 'tsc -b' 命令即可同时生成 ESM 和 CJS 构件。
-
项目引用还可以缓存类型检查结果以加快构建速度，或定义项目间的依赖关系。
延伸解读
项目引用的优势
使用 TypeScript 的项目引用配置可以显著简化构建过程。通过将多个配置文件整合到一个主配置文件中，开发者可以避免繁琐的手动配置，提升构建效率。这种方法不仅减少了出错的可能性，还能提高代码的可维护性。
构建速度的提升
项目引用配置允许缓存类型检查结果，从而加快后续构建的速度。这对于大型项目尤为重要，因为它可以显著减少开发过程中的等待时间，提升开发者的工作效率。
注意构建参数的使用
在使用 '-b' 参数时，确保所有引用的配置文件都正确无误。如果未正确设置，构建可能会失败或产生意外结果。因此，开发者在修改构建脚本时需仔细检查配置文件的路径和内容。
延伸问答
如何通过 TypeScript 生成 ESM 和 CJS 构件？
可以通过项目引用配置，在 tsconfig.json 中引用不同的配置文件，并使用 'tsc -b' 命令生成 ESM 和 CJS 构件。
使用 TypeScript 的项目引用配置有什么好处？
使用项目引用配置可以简化构建过程，避免复杂的类型检查，并提高构建速度。
在 Pedalboard 的 monorepo 中，如何配置 tsconfig.json？
在 Pedalboard 的 monorepo 中，tsconfig.json 文件包含对 tsconfig.esm.json 和 tsconfig.cjs.json 的引用，确保构建时使用这两个配置。
构建脚本的变化是什么？
构建脚本从 'tsc --project tsconfig.esm.json & tsc --project tsconfig.cjs.json' 变为 'tsc -b'，以便同时处理多个配置。
如何加快 TypeScript 的构建速度？
可以通过项目引用缓存类型检查结果，从而加快构建速度。
TypeScript 的 '-b' 参数有什么作用？
'-b' 参数用于告诉 TSC 以构建模式运行，考虑主 tsconfig.json 文件中的不同引用。
