@angangii/frontendpractice v1.1.0

一些基础知识

npx用处

1. 临时安装可执行依赖包，不用全局安装，不用担心长期的污染。
2. 可以执行依赖包中的命令，安装完成自动运行。
3. 自动加载node_modules中依赖包，不用指定$PATH。
4. 可以指定node版本、命令的版本，解决了不同项目使用不同版本的命令的问题。

npm发布包

https://blog.csdn.net/pet_ch/article/details/125281706

初始化

参考https://blog.csdn.net/qq_41581588/article/details/125920681

1. 初始化：npm init -y，生成package.json文件，新建src目录，里面放一个index.ts文件
2. 安装ts：npm i typescript -D，npx tsc --init
3. 使用Prettier解决代码格式问题，使用linters解决代码质量问题：
   • npm i eslint -D，npx eslint --init
   • npm i prettier -D，echo {}> .prettierrc.json，npm i eslint-config-prettier eslint-plugin-prettier -D
4. 因为一个项目通常是团队合作，我们不能保证每个人在提交代码之前执行一遍lint校验，所以需要git hooks 来自动化校验的过程，否则禁止提交。
   • npm i husky -D，npx husky install
   • 然后我们需要在每次执行npm install时自动启用husky，npm set-script prepare "husky install"
   • 然后添加一个lint钩子：npx husky add .husky/pre-commit "npm run lint"
5. 为什么需要 Commitlint，除了在后续的生成changelog文件和语义发版中需要提取commit中的信息，也利于其他同学分析你提交的代码，所以我们要约定commit的规范。@commitlint/cli Commitlint 命令行工具，@commitlint/config-conventional 基于 Angular 的约定规范
   • npm i @commitlint/config-conventional @commitlint/cli -D
   • npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
   • 创建.commitlintrc，并写入配置
6. 安装jest，和类型声明@types/jest，它执行需要ts-node和ts-jest
   • npm i jest @types/jest ts-node ts-jest -D
   • npx jest --init
   • 为test添加eslint检查
7. Github Actions，通过Github Actions实现代码合并或推送到主分支，dependabot机器人升级依赖等动作，会自动触发测试和发布版本等一系列流程。
   • .github/workflows文件夹，然后在里面新建ci.yml文件和cd.yml文件(监听所有分支的push和pull_request动作，自动执行linter和tests任务)
   • NPM网站上注册一个账号，获取TOKEN
   • 把token填入项目的settings中，cd.yml中会引用它
   • 然后安装语义发版依赖，需要用到semantic-release和它的插件：semantic-release：语义发版核心库，@semantic-release/changelog：用于自动生成 changelog.md，@semantic-release/git：用于将发布时产生的更改提交回远程仓库
   • 在项目根目录新建配置文件.releaserc
   • dependabot相关的配置

package.json

• type.module：从Node v12.0.0开始，只要设置了 "type": "module", Node 会将整个项目视为ESM规范，我们就可以直接写裸写import/export。
• publishConfig.access：当前项目发布到NPM的访问级别，它有 restricted和public两个选项,restricted表示我们发布到NPM上的是私有包（收费），访问级别默认为restricted,因为我们是开源项目所以标记为public。
• devDependencies用于本地环境开发时候所需要的依赖包。
• dependencies用户发布环境，生成上所需要的依赖包

package.lock.json

记录项目依赖的版本号及依赖的依赖的版本号，前面的packages部分指明了版本号，后面的dependencies是为了兼容旧版本的npm（lockfileVersion=1的情况）

tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "baseUrl": ".", // 模块解析根路径，默认为 tsconfig.json 位于的目录
    "rootDir": "src", // 编译解析根路径，默认为 tsconfig.json 位于的目录
    "target": "ESNEXT", // 指定输出 ECMAScript 版本，默认为 es5
    "module": "ESNext", // 指定输出模块规范，默认为 Commonjs
    "lib": ["ESNext", "DOM"], // 编译需要包含的 API，默认为 target 的默认值
    "outDir": "dist", // 编译输出文件夹路径，默认为源文件同级目录
    "sourceMap": true, // 启用 sourceMap，默认为 false
    "declaration": true, // 生成 .d.ts 类型文件，默认为 false
    "declarationDir": "dist/types", // .d.ts 类型文件的输出目录，默认为 outDir 目录
    /* Strict Type-Checking Options */
    "strict": true, // 启用所有严格的类型检查选项，默认为 true
    "esModuleInterop": true, // 通过为导入内容创建命名空间，实现 CommonJS 和 ES 模块之间的互操作性，默认为 true
    "skipLibCheck": true, // 跳过导入第三方 lib 声明文件的类型检查，默认为 true
    "forceConsistentCasingInFileNames": true, // 强制在文件名中使用一致的大小写，默认为 true
    "moduleResolution": "Node", // 指定使用哪种模块解析策略，默认为 Classic
  },
  "include": ["src"] // 指定需要编译文件，默认当前目录下除了 exclude 之外的所有.ts, .d.ts,.tsx 文件
} 

.eslintrc.cjs

我们将项目定义为ESM，eslint --init会自动识别type，并生成兼容的配置文件名称，如果我们改回.js结尾，再运行eslint将会报错。出现这个问题是eslint内部使用了require()语法读取配置。同样，这个问题也适用于其他功能的配置，比如后面会讲到的Prettier、Commitlint等，配置文件都不能以xx.js结尾，而要改为当前库支持的其他配置文件格式，如：.xxrc、.xxrc.json、.xxrc.yml

.prettierrc.json

把 prettier 集成到 eslint 的校验中

{
  "semi": false, // 是否使用分号
  "singleQuote": true, // 使用单引号代替双引号
  "trailingComma": "none" // 多行时尽可能使用逗号结尾
}

.commitlintrc

{
  "extends": [
    "@commitlint/config-conventional"
  ]
}

Angular 规范说明： feat：新功能 fix：修补 BUG docs：修改文档，比如 README, CHANGELOG, CONTRIBUTE 等等 style：不改变代码逻辑 (仅仅修改了空格、格式缩进、逗号等等) refactor：重构（既不修复错误也不添加功能） perf：优化相关，比如提升性能、体验 test：增加测试，包括单元测试、集成测试等 build：构建系统或外部依赖项的更改 ci：自动化流程配置或脚本修改 chore：非 src 和 test 的修改，发布版本等 revert：恢复先前的提交

tsconfig.eslint.json

扩展了tsconfig.json，解决了直接执行npm run lint将会报错，提示tests文件夹没有包含在tsconfig.json的include中，当我们添加到include之后，输出的dist中就会包含测试相关的文件的问题