Go to file
2023-02-10 17:09:40 +08:00
apps/server first commit 2023-02-10 17:08:08 +08:00
packages init 2023-02-10 17:09:40 +08:00
.gitignore init 2023-02-10 17:09:40 +08:00
package.json init 2023-02-10 17:09:40 +08:00
pnpm-lock.yaml init 2023-02-10 17:09:40 +08:00
pnpm-workspace.yaml init 2023-02-10 17:09:40 +08:00
readme.md init 2023-02-10 17:09:40 +08:00
tsconfig.build.json init 2023-02-10 17:09:40 +08:00
tsconfig.json init 2023-02-10 17:09:40 +08:00

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.jsonoutDir属性,定位入口文件src/index.ts的编译后的输出位置

e.g

// tsconfig.build.json
{
  "compilerOptions": {
    "outDir": "dist",
    "declaration": true // tsc编译生成.d.ts
  }
}

默认编译完成后。src/index.ts编译到dist/index.js

// 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
  • 目录 `

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 为 trueVSCode 也会对 js 代码中的相对路径进行解析,从而实现检查补全和跳转。

e.g.

{
  "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"

│   tsconfig.json
├───node_modules
│   └───typescript
│       └───lib
│               typescript.d.ts
└───src
        app.ts

使用--traceResolution 调用编译器。

tsc --traceResolution

参数表

文档链接

模块解析

文档链接

tsc & webpack

typescritp 的 tsc 命令是非常稳妥的编译工具,负责把 ts 编译成 js

webpack 负责构建,根据 esmodule、commonjs 规范,找到对应的依赖,通过 babel-loader 的转译、降级成 node、browser 支持的 js 代码

esbuild 同 webpack 一样,速度更快,但是 production 稳定性待考究

待解决的问题

自动化编译构建依赖

monorepo 下开发阶段本地的子包实时的编译、构建每次开发完子包build 手动太麻烦了

  • chokidar 监听 packages 下的全部文件夹
  • 触发 ts 编译过程

子包独立发布到 npm

每个子包,作为基础物料,可以独立打包发布,也就说每个子包需要配置 Webpack 进行独立的打包