要不要学一下更高效地 TS 构建方式（工程引入）

最新推荐文章于 2023-05-15 23:10:14 发布

荷包蛋_

最新推荐文章于 2023-05-15 23:10:14 发布

阅读量395

点赞数

分类专栏： typescript 文章标签： ts javascript typescript 前端 config

本文链接：https://blog.csdn.net/iamxuqianqian/article/details/116016744

版权

本文介绍了TypeScript的工程引入特性，旨在解决多工程构建的问题，如独立构建、组织代码和提升编译速度。通过工程引入，可以实现输出目录的灵活配置，依赖关系的建立，以及增量编译，从而提高构建效率。文章还提到了相关的命令行选项，帮助开发者更好地管理和监控项目构建。

摘要由CSDN通过智能技术生成

工程引入是 TypeScript 3.0 的新特性，它支持将 TypeScript 程序的结构分割成更小的组成部分。

这样可以改善构建时间，强制在逻辑上对组件进行分离，更好地组织你的代码。

TypeScript 3.0 还引入了 tsc 的一种新模式，即 --build 标记，它与工程引入协同工作可以加速 TypeScript 的构建。

背景

有时候，我们会把多个需要单独构建的工程放在一个代码仓库中。比如现在有一个全栈项目：

--src
  |--client
      |--index.ts
  |--server
      |--index.ts
  |--common (client和server公用代码)
      |--index.ts
--test
  |--client.test.ts
  |--server.test.ts
--tsconfig.json

// tsconfig.json
{
   
  "compilerOptions": {
   
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist"
  }
}

编译之后生成的 dist 目录

--dist
  |--src
      |--client
      |--server
      |--common
  |--test

这里我们遇到了许多问题：

无法同时构建 test 和 src，除非把 src 和 test 放在一个输出文件夹中，但通常并不想这样做
无法单独构建 client、server 和 common。
- 仅对实现文件的内部细节进行改动，必需再次对测试进行类型检查，尽管是不必要的
- 仅对测试文件进行改动，必需再次对实现文件进行类型检查，尽管其实什么都没有变

那不如使用多个 tsconfig 文件？但这只能解决部分问题，并且又会出现新问题：