使用 TypeScript 的 Npm 工作区

使用 TypeScript 的 Npm 工作区

如果有一个 单回购 这还不够复杂，尝试在 monorepo 内的多个包之间共享代码通常会变成一场以“让我们复制代码”而告终的战斗。工作区 — 从版本 7 开始引入 npm — 让我们在不手动运行的情况下解决这个问题 npm 链接 .

常见的设置是包含客户端和服务器应用程序的存储库：

 <your_repo>/  
 - 客户端/package.json  
 - 服务器/package.json  
 - 包.json

如果我们想共享代码，我们可以创建一个与客户端和服务器处于同一级别的目录（但这可能会导致从应用程序目录之外导入文件的问题），或者我们找到一个复杂的解决方案，或者复制代码，或者利用 npm 链接 并在同一个 repo 中创建单独的包——但不要让我为队友或外部贡献者设置它——。

TL;博士;

1. 使用 -w npm 标志 至 在里面 一个新的工作区： npm 初始化 -w<path_to_workspace> .
2. 添加一个 建造 使用 TypeScript 构建包的脚本： “构建”：“tsc index.ts ...” .
3. 跑 npm 安装 在根目录中，使其可用于 每一个 monorepo 中的应用程序——甚至是其他工作区——。
4. 最后，在构建根应用程序时构建所有工作区： "build": "npm run build --workspaces --if-present && …" .

像这样：

 npm init -w ./packages/<your_package>  
 npm 安装<some_dependency>-w ./包/<your_package> // ./package.json  
 {  
 "name": "任何不需要作用域的东西",  
 "build": "npm run build --workspaces --if-present && npm run test && rm -rf dist && npm run lint && tsc -b",  
 “工作区”：[  
 “包裹/<your_package> "  
 ]  
 } // ./包/<your_package> /package.json  
 {  
 “姓名”： ”[ @](https://twitter.com/xyz) 你的应用程序包/<your_package> ",  
 “版本”：“1.0.0”，  
 “模块”：“dist/index.js”，  
 “类型”：“dist/index.d.ts”，  
 “私人”：真的，  
 “脚本”：{  
 "build": "rm -rf dist && tsc index.ts --declaration --allowJs --outDir dist"  
 }  
 } // 从根目录（使您的工作区可用）  
 npm 安装 // ./server/src/index.ts  
 // 注意：不要运行 `npm i[ @](https://twitter.com/xyz) 我们的应用程序包/<your_package> `  
 // 这是由 npm 自动处理的。  
 从'导入 MyError[ @](https://twitter.com/xyz) 我们的应用程序包/错误'

解决方案

使用工作区，这将得到简化。假设我们有一个错误库，我们想与客户端和服务器共享：

 <your_repo>/  
 **- 包/错误/package.json**  
 - 客户端/package.json  
 - 服务器/package.json  
 - 包.json

我们可以直接 在工作区的上下文中运行 npm 命令 通过使用 -w 标志（我们可以为每个 npm 命令执行此操作）：

 npm init -w ./packages/errors

这有两件事

1.首先，它在根目录中添加一个新条目 包.json 对于这个新工作区：

 “工作区”：[  
 “包/错误”  
 ],

2. 其次，它创造了 ./包/错误 目录并初始化一个 包.json ：

 {  
 “姓名”： ”[ @](https://twitter.com/xyz) 我们的应用程序/错误",  
 “版本”：“1.0.0”，  
 “模块”：“dist/index.js”，  
 “类型”：“dist/index.d.ts”，  
 “私人”：真的，  
 “脚本”：{  
 "build": "rm -rf dist && tsc index.ts --declaration --allowJs --outDir dist"  
 }  
 }

要记住的几件事；

• “ @ourapp ” 范围可以是任何东西，但要尝试使用独特的东西，因此它不会与外部模块发生冲突，例如 @ourapp-packages 或者 @ourapp-common .这样做的另一个好处是让您的开发人员知道它是来自您的应用程序的包，而不是外部库。
• 我换了 主要的 财产与 模块 因为我为客户端和服务器应用程序使用捆绑器。无需假设它会像其他外部库一样在没有它的情况下使用。
• 我添加了使用 TypeScript 而不是常规捆绑程序的构建脚本来编译代码。这也有助于声明，这对于共享代码至关重要。
• 我添加了 类型：“dist/index.d.ts” 出于显而易见的原因。
• 我添加了 私人：真实 因为这是一个私人共享的包。

工作区依赖项

要为工作区安装依赖项，您可以导航到目录并以常规方式安装它 npm 安装<dep> 或使用 npm -w 旗帜 ：

 npm 我<dependency>--save -w 包/<your_package>

建造

在构建完整产品时，我们首先通过在 建造 根目录下的脚本 包.json ：

 “脚本”：{  
 "build": "npm run build --workspaces --if-present && npm run test && rm -rf dist && npm run lint && tsc -b",  
 },

关键是我们使用 TypeScript 来构建每个包，并且我们使用 --如果存在 如果在我们构建自己的构建脚本之前有构建脚本，则标志告诉 npm 构建包：

 npm run build --workspaces --if-present

我们可以为测试做同样的事情。

安装工作区

 npm 安装

跑 npm 安装 在根级别和 npm 将使工作空间可供使用，而无需为每个应用程序手动安装它们作为依赖项。

用法

您的工作区可能如下所示：

 // ./packages/errors/index.ts  
 从“lodash/get”导入获取； 导出默认类 MyError {  
 构造函数（选择：任何）{  
 const prop = get(opts, 'prop', false)  
 // ...  
 }  
 } 从“./something-else”导出 *；

您的服务器或客户端现在看起来像这样，而无需将软件包安装为依赖项：

 // ./server/src/index.ts  
 从“@ourapp-packages/errors”导入 MyError 函数 SomeController() {  
 抛出新的 MyError(...)  
 }

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/30426/58201209