npm + TypeScript使用workspace（npm @types）

有时候希望把某一个模块实现称为一个库，但是暂时又不希望把这个库放在另外一个仓库里面。这个时候就可以使用workspace的功能。

首先我们新建一个Node.js项目：

安装一下TypeScript编译器

npm install –save-dev typescript

package.json

{
  "name": "ts-workspace",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.7.2"
  }
}

然后初始化一下TypeScript配置。

npx tsc --init

这个时候会自动创建tsconfig.json

这是我们的主项目，接着我们要建立workspace项目。

npm init --workspace ./my-lib

这里先一路用默认值。

然后就跳入./my-lib目录，安装TypeScript编译器和初始化TypeScript配置，方法和前面一样。

完整后的目录结构如下：

接着我们在my-lib目录下面建一个index.ts，用于创建一个TypeScript接口。

export interface MyConfig {
    getName: () => string;
}

在./my-lib的package.json里面添加build脚本：

运行npm run build，就可以产生对应的index.js文件了。

TypeScript除了要产生js文件，还需要产生一个index.d.ts声明文件。

修改tsconfig.json，然后去掉”declaration”配置的注释。

再运行npm run build，就可以看到index.d.ts文件也生成了。

接着还要在my-lib文件夹里面的package.json，添加”types”字段，用于告诉TypeScript，类型声明文件是刚才生成的index.d.ts。

这样my-lib这个库就做完了。

但是要在主仓库里面使用，还需要回到主仓库，运行npm install

他会自动在主目录的node_modules目录下面建立一个my-lib的symbol link。

这样主程序就能使用my-lib这个库了。

写一小段程序使用一下my-lib暴露的那个interface。

import { MyConfig } from "my-lib";

class MyClass implements MyConfig {
    getName = () => {
        return "ABC";
    }
}

const m = new MyClass();
console.log(m.getName());

引用都没有问题。

把模块临时放在workspace里面，可以使代码更模块化，同时也为模块稳定之后，移入一个正式的单独仓库做准备。