web-backset.cn/readme.md
2023-02-13 09:41:08 +08:00

198 lines
6.0 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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 将文件夹转变一个工程 如果不指定任何 excludefiles”,文件夹里的所有文件包括 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 为 trueVSCode 也会对 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 稳定性待考究
## 移花接木 cjs(.js) + es(d.ts) 小操作
场景monorepo 架构下,某些基础子包作为工具包,无需发布,例如 nestjs 外部依赖 `@demo/util`的某个方法,因为在`node`环境,如果用 `commonjs` 规范开发,再走 tsc 编译,生成的 `index.d.ts` IDE 无法进行代码智能提示。
- 利用 `tsc 构建`, `cjs``es` 规范的两个编译版本
-`package.json` 入口默认使用 `cjs` 规范的 `js` 文件,同时types 文件使用 `es` 规范的 `d.ts` 文件
```json
// tsconfig.build-cjs.json
{
"compilerOptions": {
"module": "CommonJS",
"outDir": "./dist/cjs"
}
}
//
```
再来个 esmodule 规范的
```json
// tsconfig.build-es.json
{
"compilerOptions": {
"outDir": "./dist/es"
}
}
```
骚操作来了
```json
// package.json
{
"name": "@demo/util",
"main": "dist/cjs/index",
"types": "dist/es/index.d.ts"
}
```
# 坑点
## vite 项目引包报错
能够直接读取 tsconfig.json 并使用同样的路径解析方式。用这个插件替换掉上面的 alias 配置就能保证路径解析规则在 vite 和 create-react-app 环境中保持一致。
```js
import tsconfigPaths from "vite-tsconfig-paths";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), tsconfigPaths()],
});
```
# 待解决的问题
## 自动化编译构建依赖?真的需要吗?
monorepo 下开发阶段本地的子包实时的编译、构建每次开发完子包build 手动太麻烦了
- chokidar 监听 packages 下的全部文件夹
- 触发 ts 编译过程
## 子包独立发布到 npm
每个子包,作为基础物料,可以独立打包发布,也就说每个子包需要配置 Webpack 进行独立的打包