Cao Note工程化实践
前端工程化错误监控
jsx
这种监控可以帮助开发人员及时发现和解决问题，提高应用程序的稳定性和可靠性。
1. Sentry：Sentry是一款开源的错误监控平台，可以监控前端、后端以及移动端应用程序中的错误和异常。Sentry提供了实时错误报告、错误分析和错误解决方案等功能。
2. Bugsnag：Bugsnag是一款专门用于监控Web应用程序和移动应用程序的错误监控工具。它可以捕获JavaScript异常、网络请求错误、客户端错误等。
3. Google Analytics：Google Analytics可以监控网站的访问量、页面浏览量、访问时长和用户行为等。它还提供了实时报告和错误报告等功能，可以帮助开发人员发现和解决问题。
4. Performance API：Performance API是一个浏览器提供的API，可以监控Web应用程序的性能。它可以捕获页面加载时间、资源下载时间和JavaScript执行时间等信息。
5. 前端错误监控SDK：很多前端错误监控工具都提供了JavaScript SDK，可以通过在应用程序中引入SDK来捕获错误和异常。开发人员可以根据捕获的错误信息来定位和解决问题。这种监控可以帮助开发人员及时发现和解决问题，提高应用程序的稳定性和可靠性。
1. Sentry：Sentry是一款开源的错误监控平台，可以监控前端、后端以及移动端应用程序中的错误和异常。Sentry提供了实时错误报告、错误分析和错误解决方案等功能。
2. Bugsnag：Bugsnag是一款专门用于监控Web应用程序和移动应用程序的错误监控工具。它可以捕获JavaScript异常、网络请求错误、客户端错误等。
3. Google Analytics：Google Analytics可以监控网站的访问量、页面浏览量、访问时长和用户行为等。它还提供了实时报告和错误报告等功能，可以帮助开发人员发现和解决问题。
4. Performance API：Performance API是一个浏览器提供的API，可以监控Web应用程序的性能。它可以捕获页面加载时间、资源下载时间和JavaScript执行时间等信息。
5. 前端错误监控SDK：很多前端错误监控工具都提供了JavaScript SDK，可以通过在应用程序中引入SDK来捕获错误和异常。开发人员可以根据捕获的错误信息来定位和解决问题。添加 TypeScript 到 JS 项目
tsconfig.json 配置文件
javascript
{
"compilerOptions": {
"incremental": true, // 增量编译
"tsBuildInfoFile": ".tsbuildinfo", // 增量编译文件的存储位置
"diagnostics": true, // 打印诊断信息
"target": "ES5", // 目标语言版本
"module": "commonjs", // 生成代码的模块标准
"lib": [], // TS需要引用的库
"allowJs": true, // 允许编辑JS文件
"outDir": "./out", // 指定输出的目录
"rootDir": "./", // 指定输入文件目录
"sourceMap": false, // 生成目标文件的sourceMap
"strict": false, // 严格的类型检查
"esModuleInterop": false, // 允许export = 导出，由import from导入
"moduleResolution": "node", // 模块解析策略
"baseUrl": "", // 解析非相对模块的基地址
"paths": {}, // 路径映射
// ... 更多配置项
}
}{
"compilerOptions": {
"incremental": true, // 增量编译
"tsBuildInfoFile": ".tsbuildinfo", // 增量编译文件的存储位置
"diagnostics": true, // 打印诊断信息
"target": "ES5", // 目标语言版本
"module": "commonjs", // 生成代码的模块标准
"lib": [], // TS需要引用的库
"allowJs": true, // 允许编辑JS文件
"outDir": "./out", // 指定输出的目录
"rootDir": "./", // 指定输入文件目录
"sourceMap": false, // 生成目标文件的sourceMap
"strict": false, // 严格的类型检查
"esModuleInterop": false, // 允许export = 导出，由import from导入
"moduleResolution": "node", // 模块解析策略
"baseUrl": "", // 解析非相对模块的基地址
"paths": {}, // 路径映射
// ... 更多配置项
}
}安装依赖
javascript
yarn add typescript --D
yarn add @types/node @types/react @types/react-dom @types/react-router-domyarn add typescript --D
yarn add @types/node @types/react @types/react-dom @types/react-router-dom初始化 tsconfig
html
npx tsc --initnpx tsc --initWebpack 配置
javascript
// 安装 ts-loader
yarn add ts-loader eslint-import-resolver-typescript --D
// resolve.extensions 新增 .ts/.tsx
resolve: {
extensions: ['.js', '.json', '.ts', '.tsx'],
}
// 配置 ts-loader
{
test: /\.tsx?$/,
use: 'babel-loader',
exclude: /node-modules/,
}
// 安装 @babel/preset-typescript
yarn add @babel/preset-typescript -D
// .babelrc 新增
"presets": [
"@babel/typescript"
],// 安装 ts-loader
yarn add ts-loader eslint-import-resolver-typescript --D
// resolve.extensions 新增 .ts/.tsx
resolve: {
extensions: ['.js', '.json', '.ts', '.tsx'],
}
// 配置 ts-loader
{
test: /\.tsx?$/,
use: 'babel-loader',
exclude: /node-modules/,
}
// 安装 @babel/preset-typescript
yarn add @babel/preset-typescript -D
// .babelrc 新增
"presets": [
"@babel/typescript"
],ESLint 配置
javascript
// 安装
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
// .eslintrc.js 中新增 overrides
overrides: [
{
files: ['*.ts', '*.tsx'],
parser: '@typescript-eslint/parser',
settings: {
'import/resolver': {
node: { extensions: ['.js', '.jsx', '.ts', '.tsx', '.css'] },
typescript: { alwaysTryTypes: true },
},
},
plugins: ['@typescript-eslint'],
extends: ['plugin:shopify/esnext'],
parserOptions: {
ecmaFeatures: { jsx: true },
ecmaVersion: 12,
sourceType: 'module',
},
rules: {
'no-console': 0,
'no-use-before-define': 'off',
},
},
]// 安装
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
// .eslintrc.js 中新增 overrides
overrides: [
{
files: ['*.ts', '*.tsx'],
parser: '@typescript-eslint/parser',
settings: {
'import/resolver': {
node: { extensions: ['.js', '.jsx', '.ts', '.tsx', '.css'] },
typescript: { alwaysTryTypes: true },
},
},
plugins: ['@typescript-eslint'],
extends: ['plugin:shopify/esnext'],
parserOptions: {
ecmaFeatures: { jsx: true },
ecmaVersion: 12,
sourceType: 'module',
},
rules: {
'no-console': 0,
'no-use-before-define': 'off',
},
},
]eslint 不会报告 typescript 类型错误，ts 如需要检测类型需要使用
tsc --noEmit命令
本地修改依赖包并应用
使用 patch-package
javascript
1. 安装 patch-package:
npm install --save-dev patch-package 或 yarn add patch-package -D
2. 修改依赖包源码
3. 创建补丁文件:
npx patch-package <dependency-name>
4. 提交补丁文件到版本控制系统
5. package.json 中添加:
{ "scripts": { "postinstall": "patch-package" } }1. 安装 patch-package:
npm install --save-dev patch-package 或 yarn add patch-package -D
2. 修改依赖包源码
3. 创建补丁文件:
npx patch-package <dependency-name>
4. 提交补丁文件到版本控制系统
5. package.json 中添加:
{ "scripts": { "postinstall": "patch-package" } }Git Hooks 与代码规范
husky + lint-staged + commitlint
bash
# 安装 husky
npm install husky --save-dev
# 安装 lint-staged
npm install lint-staged --save-dev
# 安装 commitlint
npm install @commitlint/cli @commitlint/config-conventional --save-dev# 安装 husky
npm install husky --save-dev
# 安装 lint-staged
npm install lint-staged --save-dev
# 安装 commitlint
npm install @commitlint/cli @commitlint/config-conventional --save-devpackage.json 配置：
json
{
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
"*.{css,scss,less}": ["stylelint --fix", "prettier --write"],
"*.{md,json}": ["prettier --write"]
}
}{
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
"*.{css,scss,less}": ["stylelint --fix", "prettier --write"],
"*.{md,json}": ["prettier --write"]
}
}commitizen
bash
# 全局安装
npm install commitizen -g
# 项目初始化
commitizen init cz-conventional-changelog --save-dev --save-exact
# 使用
git cz# 全局安装
npm install commitizen -g
# 项目初始化
commitizen init cz-conventional-changelog --save-dev --save-exact
# 使用
git cz规范提交信息
遵循 Conventional Commits 规范：
<type>(<scope>): <subject>
<body><type>(<scope>): <subject>
<body>常见 type：feat、fix、docs、style、refactor、perf、test、build、ci、chore、revert
版本号规范
版本号格式：major.minor.patch（主版本号.次版本号.补丁版本号）
^：允许自动更新次版本号和补丁版本号~：只允许更新补丁版本号>=/<：指定版本范围=：精确版本号
CI/CD 持续集成与部署
常见 CI/CD 平台
- GitHub Actions：GitHub 内置的 CI/CD
- GitLab CI：GitLab 内置的 CI/CD
- Jenkins：自托管 CI/CD 工具
- CircleCI：云端 CI/CD 服务
- Travis CI：云端 CI/CD 服务
GitHub Actions 示例
yaml
name: CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
- run: npm ci
- run: npm run lint
- run: npm run test
- run: npm run buildname: CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
- run: npm ci
- run: npm run lint
- run: npm run test
- run: npm run build代码质量工具
ESLint + Prettier + Stylelint
bash
npm install eslint prettier stylelint --save-devnpm install eslint prettier stylelint --save-dev推荐 ESLint 配置：
eslint-config-airbnbeslint-config-standardeslint-plugin-shopify
EditorConfig
在项目根目录创建 .editorconfig：
ini
root = true
[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = trueroot = true
[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true