# project-engineering

**Repository Path**: ray01yang/project-engineering

## Basic Information

- **Project Name**: project-engineering
- **Description**: 工程化模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-24
- **Last Updated**: 2022-08-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

链接地址：
https://mp.weixin.qq.com/s?__biz=MzIyMDkwODczNw==&mid=2247504224&idx=1&sn=6e1e70b30d90410c7b9fc25eeff9c487

### 初始化
npm init -y


### 新建src文件夹
写入index.ts

### package.json

添加如下配置项

```

   "main": "index.js",
+  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "publishConfig": {
+    "access": "public"
+  }

```

我们将项目定义为ESM规范,前端社区正逐渐向ESM标准迁移，从Node v12.0.0开始，只要设置了 "type": "module", Node 会将整个项目视为ESM规范，我们就可以直接写裸写import/export。

publishConfig.access表示当前项目发布到NPM的访问级别，它有 restricted和public两个选项,restricted表示我们发布到NPM上的是私有包（收费），访问级别默认为restricted,因为我们是开源项目所以标记为public。


### Typescript
先安装 TypeScript，然后使用 tsc 命名生成 tsconfig.json。

```
npm i typescript -D
npx tsc --init

```
 

然后我们将编译后的文件路径添加到 package.json，并在 scripts 中添加编译命令。

```
{
  "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 文件
} 

```

然后我们将编译后的文件路径添加到 package.json，并在 scripts 中添加编译命令。

```
-  "main": "index.js",
+  "main": "dist/index.js",
+  "types": "dist/types/index.d.ts"
   "type": "module",
-   "scripts": {
-     "test": "echo \"Error: no test specified\" && exit 1"
-   },
+   "scripts": {
+     "dev": "tsc --watch",
+     "build": "npm run clean && tsc",
+     "clean": "rm -rf dist"
+  },
   "publishConfig": {
     "access": "public"
   }

```


### 删除文件命令
npm install rimraf --save-dev


### 安装eslint
npm i eslint -D
npx eslint --init
npm install eslint-plugin-n@latest --save-dev

### eslint执行失败
Failed to load plugin '@typescript-eslint' declared in '.eslintrc.js'

package.json -> 修改

```
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",

```
npm i 


### 安装eslint-config-standard-with-typescript
npm i eslint-config-standard-with-typescript -D

### 安装 prettier 并初始化配置文件
npm i prettier -D
echo {}> .prettierrc.json

然后在.prettierrc.json添加配置，这里只需要添加和你所选规范冲突的部分。

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

```


安装解决冲突需要用到的两个依赖
eslint-config-prettier 关闭可能与 prettier 冲突的规则
eslint-plugin-prettier 使用 prettier 代替 eslint 格式化

```
npm i eslint-config-prettier eslint-plugin-prettier -D
```

### Husky
因为一个项目通常是团队合作，我们不能保证每个人在提交代码之前执行一遍lint校验，所以需要git hooks 来自动化校验的过程，否则禁止提交。
安装Husky并生成.husky文件夹

保证项目根目录上有.git文件夹

```
npm i husky -D
npx husky install

```

### Commitlint
为什么需要 Commitlint，除了在后续的生成changelog文件和语义发版中需要提取commit中的信息，也利于其他同学分析你提交的代码，所以我们要约定commit的规范。

安装 Commitlint

@commitlint/cli Commitlint 命令行工具
@commitlint/config-conventional 基于 Angular 的约定规范

```
npm i @commitlint/config-conventional @commitlint/cli -D

```
最后将Commitlint添加到钩子
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

创建.commitlintrc，并写入配置
```
{
  "extends": [
    "@commitlint/config-conventional"
  ]
}

```

注意，这里配置文件名使用的是.commitlintrc而不是默认的.commitlintrc.js

测试钩子是否生效，修改index.ts，让代码正确
```
const calc = (a: number, b: number): void => {
    console.log(a - b)
  }
- // calc(1024, 28)
+ calc(1024, 28)

```

提交一条不符合规范的commit，提交将会失败
git add .
git commit -m "add eslint and commitlint"

修改为正确的commit，提交成功！
git add .
git commit -m 'ci: add eslint and commitlint'


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


### Jest
安装jest，和类型声明@types/jest，它执行需要ts-node和ts-jest

这里暂时固定了ts-node的版本为 v9.1.1，新版的ts-node@v10.0.0会导致jest报错，等待官方修复，详见：issues

```
npm i jest @types/jest ts-node@9.1.1 ts-jest -D

```

初始化配置文件
npx jest --init