init

.gitignore

@@ -0,0 +1,2 @@
+**/node_modules
+**/dist

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "pnpm-monorepo-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev:apps-server": "cd apps/server && pnpm start:dev"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/node": "^18.13.0",
+    "rimraf": "^4.1.2",
+    "typescript": "^4.9.5"
+  },
+  "dependencies": {
+    "object-hash": "^3.0.0"
+  }
+}

packages/ui/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@backset/ui",
+  "version": "1.0.0",
+  "main": "dist/index",
+  "types": "dist/index",
+  "scripts": {
+    "build": "rimraf ./dist && tsc -p ./tsconfig.build.json"
+  }
+}

packages/ui/src/index.ts

@@ -0,0 +1,5 @@
+import { cipher, foo } from "@demo/util";
+
+console.log(foo);
+
+console.log(cipher);

packages/ui/tsconfig.build.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "target": "es5",
+    "declaration": true,
+    "sourceMap": true
+  }
+}

packages/ui/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {},
+  "include": [
+    "src/**/*"
+  ],
+  "extends": "../../tsconfig.json",
+}

packages/util/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@backset/util",
+  "version": "1.0.0",
+  "main": "dist/index",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rimraf ./dist && tsc -p ./tsconfig.build.json"
+  },
+  "devDependencies": {
+    "md5.js": "1.3.5"
+  }
+}

packages/util/src/encrypt.ts

@@ -0,0 +1,3 @@
+const hash = require("object-hash");
+
+export const md5 = (text: string) => hash(text, { algorithm: "md5" });

packages/util/src/index.ts

@@ -0,0 +1,5 @@
+import * as EncryptUtil from "./encrypt";
+
+export const foo = "foo";
+
+export { EncryptUtil };

packages/util/tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+  }
+}

packages/util/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {},
+  "extends": "../../tsconfig.json",
+  "include": [
+    "src/**/*"
+  ],
+}

pnpm-workspace.yaml

@@ -0,0 +1,7 @@
+packages:
+  # all packages in direct subdirs of packages/
+  - "packages/*"
+  # all packages in subdirs of components/
+  - "apps/**"
+  # exclude packages that are inside test directories
+  - "!**/test/**"

readme.md

@@ -0,0 +1,142 @@
+# package.json
+
+## ~ ^ version
+
+- ~version: 近似等于的版本，会将您更新到所有未来的补丁版本，而不会增加次要版本。 ~1.2.3 将使用从 1.2.3 到 <1.3.0 的版本。
+
+- ^version: 兼容版本，将更新到所有未来的次要/补丁版本，而不增加主要版本。 ^2.3.4 将使用从 2.3.4 到 <3.0.0 的版本。
+
+## typings / types
+
+tsc 编译后，根据`tsconfig.json`的`outDir`属性，定位入口文件`src/index.ts`的编译后的输出位置
+
+e.g
+
+```json
+// tsconfig.build.json
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true // tsc编译生成.d.ts
+  }
+}
+```
+
+默认编译完成后。`src/index.ts`编译到`dist/index.js`
+
+```json
+// package.json
+{
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts"
+}
+```
+
+这种情况，作为依赖，`workspace`下的其他包引入，`vscode`会有代码提示
+
+# tsconfig.json
+
+指定了用来编译这个项目的根文件和编译选项
+
+## tsc 命令
+
+tsconfig.json 将文件夹转变一个“工程” 如果不指定任何 “exclude”或“files”，文件夹里的所有文件包括 tsconfig.json 和所有的子目录都会在编译列表里。 如果你想利用 “exclude”排除某些文件，甚至你想指定所有要编译的文件列表，请使用“files”。
+
+- 不带 tsconfig.json: 默认读当前目录 tsconfig.json
+- 带 tsconfig.json: 参数 -p /path/tsconfing.json
+
+## include && exclude
+
+> 使用 "outDir"指定的目录下的文件永远会被编译器排除,除非你明确地使用"files"将其包含进来（这时就算用 exclude 指定也没用）。
+
+`include`包含的文件使用`exclude`排斥
+
+`exclude`认情况下会排除
+
+- node_modules
+- bower_components
+- jspm_packages
+- <outDir>目录
+  `
+
+## baseUrl && paths
+
+> https://www.tslang.cn/docs/handbook/module-resolution.html#base-url
+
+解析非相对模块名的基准目录。查看 `模块解析` 文档了解详情。
+
+相对于 `tsconfig.json` 当前所在的路径
+
+> 相对模块的导入不会被设置的 baseUrl 所影响
+
+tsconfig.json 中通过 baseUrl 和 paths 指定，主要用于 ts 编译，VSCode 编辑器也会据此对路径进行检查和补全
+
+paths 只影响 tsc 编译，但不会对输出内容进行修改。也就是说，ts-loader(或 babel-loader)输出的 js 文件还会是基于相对路径引入的。如果 webpack 不配置对应的 alias，后续构建将会出错。
+
+如果 tsconfig 中 allowJS 为 true，VSCode 也会对 js 代码中的相对路径进行解析，从而实现检查补全和跳转。
+
+e.g.
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".", // 一般tsconfig.json在根目录。↓ node_modules同级
+    "paths": {
+      "jquery": ["node_modules/jquery/dist/jquery"] // 此处映射是相对于"baseUrl"
+    }
+  }
+}
+```
+
+注意"paths"是相对于"baseUrl"进行解析。 如果 "baseUrl"被设置成了除"."外的其它值，比如 tsconfig.json 所在的目录，那么映射必须要做相应的改变。 如果你在上例中设置了 "baseUrl": "./src"，那么 jquery 应该映射到"../node_modules/jquery/dist/jquery"。
+
+## 跟踪模块解析
+
+如之前讨论，编译器在解析模块时可能访问当前文件夹外的文件。 这会导致很难诊断模块为什么没有被解析，或解析到了错误的位置。 通过 --traceResolution 启用编译器的模块解析跟踪，它会告诉我们在模块解析过程中发生了什么。
+
+假设我们有一个使用了 typescript 模块的简单应用。 app.ts 里有一个这样的导入`import * as ts from "typescript"`。
+
+```bash
+│   tsconfig.json
+├───node_modules
+│   └───typescript
+│       └───lib
+│               typescript.d.ts
+└───src
+        app.ts
+```
+
+使用--traceResolution 调用编译器。
+
+```bash
+tsc --traceResolution
+```
+
+## 参数表
+
+[文档链接](https://www.tslang.cn/docs/handbook/compiler-options.html)
+
+## 模块解析
+
+[文档链接](https://www.tslang.cn/docs/handbook/module-resolution.html)
+
+# tsc & webpack
+
+typescritp 的 `tsc` 命令是非常稳妥的编译工具，负责把 ts 编译成 js
+
+webpack 负责构建，根据 esmodule、commonjs 规范，找到对应的依赖，通过 babel-loader 的转译、降级成 node、browser 支持的 js 代码
+
+esbuild 同 webpack 一样，速度更快，但是 production 稳定性待考究
+
+# 待解决的问题
+
+## 自动化编译构建依赖
+
+monorepo 下，开发阶段，本地的子包，实时的编译、构建，每次开发完子包，build 手动太麻烦了
+
+- chokidar 监听 packages 下的全部文件夹
+- 触发 ts 编译过程
+
+## 子包独立发布到 npm
+
+每个子包，作为基础物料，可以独立打包发布，也就说每个子包需要配置 Webpack 进行独立的打包

tsconfig.build.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "declaration": true,
+    "sourceMap": true,
+    "skipLibCheck": true // 忽略烈性检查
+  },
+}

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": true, /* 在表达式和声明上有隐含的 any类型时报错。*/
+    "strictNullChecks": true,
+    "baseUrl": ".",
+    "paths": {
+      "@demo/*": [
+        "packages/*/src" // packages/*/src/index.ts 作为入口文件常规操作
+      ]
+    }
+  },
+}