[Typescript] TS Monorepo setup

Yarn workspace

Add following lines to the package.json file

  "workspaces": [
    "packages/*"
  ]

And create folder call packages in the root folder.

Something need to know about:

Any package under packages folder can be located by yarn, you only need to do yarn in root folder, it will find all the package under packages and install dependencies only once

Install Workspace dependencies

For example:

yarn add -WD eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser rimraf lerna

-Wflag mean that we want to installl as worksapce dependency.

It is one place for all packages, to prevent we install the same package for multi different package sparately.

Run one CLI command for all packages by Lerna

https://lerna.js.org/

yarn add -WD lerna

Create a lerna.json file in root folder

{
  "packages": ["packages/*"],
  "npmClient": "yarn",
  "version": "0.0.1",
  "useWorkspaces": true,
  "nohoist": ["parcel-bundler"]
}

The version here affect all the packages in workscape. So if we want to update all package to the same version, can update "version" just here.

Or we can put:

"version": "independent",

Commands:

lerna link: 

for example in @shlack/utilspackage you add @shlack/typesas dependcy:

{
  "name": "@shlack/utils",
  ...
  "dependencies": {
    "date-fns": "^2.29.1",
    "jest": "^28.1.3",
    "react": "^18.2.0",
    "@shlack/types": "^0.0.1"
  },
}

After you ran lerna linkinside @shlack/utilsfolder, you will see, @shlack/typeshas been locally linked to utils node_modules folder. This allow us to link different version of @shlack/typesinto utils which normal npm linkcannot do.

lerna run *: run the package json script

lerna run clean: cleanup all the linked packages include node_modules all in one go.

lerna run build: it will run the lowest depnedcy first.

lerna bootstrap:similar to yarn install

lerna run test --concurrency 2 --stream: run all tests in each package concurrently and stream the output

lerna run dev --scope '@shlack/ui': just run yarn dev in @shlack/ui project

Scripty

https://github.com/testdouble/scripty#readme

1. In root project, we need to modify package json to tell where to find scripty folder for worksapce

  "scripty": {
    "path": "./scripts/workspace"
  },

2. For example sub-packages, we need to modify package.json to tell where to find scripty folder for package

  "scripty": {
    "path": "../../scripts/packages"
  },

3. The scripts folder looks like this:

// packages
// build.sh
#!/usr/bin/env bash
echo "┏━━━ 

标签：Typescript,package,setup,TS,json,api,file,folder,lerna	

From： https://www.cnblogs.com/Answer1215/p/16581382.html