Yarn
- https://yarn.bootcss.com/
Yarn是一个由Facebook共享的JavaScript包管理器，用于解决团队使用NPM面临的少数问题：
- 安装时无法保证速度和一致性
- 安全问题，NPM安装时允许运行代码。
Yarn同时是从NPM注册源获取模块的新CLI客户端
安装Yarn
- 使用NPM全局安装Yarn
$ node -v
v14.16.0
$ npm -v
6.14.11
$ npm i -g yarn
$ yarn -version
1.22.10
Vite
- https://www.vitejs.net/guide/
使用Yarn创建Vite+Vite+TS项目
$ yarn create @vitejs/app web_admin --template vue-ts
$ cd web_admin
$ yarn && yarn dev
集成单元测试
- https://vue-test-utils.vuejs.org/zh/
- Vue Test Utils 是 Vue.js 官方的单元测试实用工具库
安装Jest测试单元组件
- https://www.jestjs.cn/
- Jest是一个开源的JavaScript单元测试框架
$ yarn add jest --dev
创建测试目录
$ mkdir -p tests/unit
创建单元测试脚本，默认规定单元测试文件以*.unit.js作为结尾。
$ vim tests/unit/index.unit.js
test("1+1=2", ()=>{
expect(1 + 1).toBe(2)
})
配置Jest单元测试只寻找以*.test.js或*.unit.js文件作为测试文件
$ vim jest.config.js
module.exports = {
testMatch:[
"**/?(*.)+(unit|test).[jt]s?(x)"
]
}
添加自定义测试命令
$ vim package.json
"scripts": {
"test:unit":"jest"
},
执行测试命令
$ yarn test:unit
PASS tests/unit/index.spec.js
√ 1+1=2 (3 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 16.41 s
Ran all test suites.
Done in 23.15s.
解决测试文件自动提示
$ yarn add @types/jest --dev
安装对ESM的支持
配置Jest，添加转换器。转换器提供同步功能以转换源文件中的模块。
$ vim jest.config.js
配置JSX转换器
module.exports = {
transform:{"^.+\\.jsx?$":"bebel-jest"}
}
安装babel-jest插件
$ yarn add babel-jest --dev
配置Babel解析代码的规则
$ vim babel.config.js
module.exports = {
presets:[["@babel/preset-env", {targets:{node:"current"}}]]
}
安装预设
$ yarn add @babel/preset-env --dev
测试环境
$ yarn test:unit
Jest配置解析Vue文件
$ vim jest.config.js
module.exports = {
transform:{
"^.+\\.jsx?$":"babel-jest",
"^.+\\.vue?$":"vue-jest"
}
}
安装支持Vue3的vue-jest
$ yarn add vue-jest@next --dev
安装完成后在Jest单元测试中即可使用import导入Vue组件
安装支持Vue3的@vue/test-utils
$ yarn add @vue/test-utils@next --dev
安装Jest支持TS
$ vim jest.config.js
module.exports = {
transform:{
"^.+\\.jsx?$":"babel-jest",
"^.+\\.vue?$":"vue-jest",
"^.+\\.tsx$":"ts-jest"
}
}
安装ts-jest
$ yarn add ts-jest --dev
TypeScrpt
配置Babel支持TypeScript
$ vim babel.config.js
module.exports = {
presets:[
["@babel/preset-env", {targets:{node:"current"}}],
"@babel/preset-typescript"
]
}
安装@babel/preset-typescript
$ yarn add @babel/preset-typescript --dev
配置TypeScript编译器选项
$ vim tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"types": ["vite/client", "jest"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "tests"]
}
集成E2E测试
- E2E测试采用cypress
- https://docs.cypress.io
Cypress是基于Node.js环境的UI自动化测试工具，也是一种E2E（End to End）测试框架，用于解决开发者与QA工程师在测试现代化应用程序时面临的关键难题。
$ yarn add cypress --dev
配置E2E测试命令
$ vim package.json
{
"scripts": {
"test:e2e":"cypress open"
}
}
运行测试命令验证是否成功
$ yarn test:e2e
Failed to deserialize the V8 snapshot blob. This can mean that the snapshot blob file is corrupted or missing.
解决方案：删除 AppData\Local\Cypress\Cache的Cache目录后再重新安装
运行成功后会在根目录下生成cypress文件夹，将cypress根目录下所有文件拷贝到tests/e2e目录下。然后在根目录下的cypress.json中配置新的文件路径。
$ vim cypress.json
{
"pluginsFile":"tests/e2e/plugins/index.ts",
"video":false
}
删除tests/e2e/integration目录后创建specs文件夹用于存放测试文件，测试文件默认以*.spec.js作为后缀。
将e2e目录下的JS转换为TS文件
重新配置Cypress插件选项
$ vim tests/e2e/plugins/index.ts
/**
* @type {Cypress.PluginConfig}
*/
module.exports = (on, config) => {
return Object.assign({}, config, {
fixturesFolder:"tests/e2e/fixtures",
integrationFolder:"tests/e2e/specs",
screenshotsFolder:"tests/e2e/screenshots",
videosFolder:"tests/e2e/videos",
supportFile:"tests/e2e/support/index.ts"
})
}
此时运行yarn test:unit单元测试会发现与yarn test:e2e相互冲突，解决的方案是在根目录下的tsconfig.json的include选项中只包含tests/unit。然后在tests/e2e目录下创建tsconfig.json为其单独指定TS配置。
$ vim tests/e2e/tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
}
}
默认执行cypress open时会重新开启一个窗口，若希望在终端中执行，则需要直接在命令行中直接执行命令：
$ npm cypress run
在package.json的scripts自定义脚本命令中添加新的命令
$ vim package.json
"test:e2e-cli":"cypress run"
集成代码质量检查工具
pre-commit钩子用于代码质量检查，使用yorkie使得钩子能够从package.json中的gitHooks属性中读取。
yorkie包用来检查commit message是否符合规范
安装yorkie包
$ yarn add yorkie --dev
package.json配置gitHooks属性，指定Commit message的规范，规范建议采用Angular规范。
$ vim package.json
"gitHooks": {
"commit-msg": "node scripts/verify_git_commit.js"
}
添加验证提交信息的脚本
$ vim scripts/verify_git_commit.js
const chalk = require('chalk')
const msgPath = process.env.GIT_PARAMS
const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()
const commitRE = /^(revert: )?(feat|fix|docs|style|refactor|perf|test|workflow|ci|chore|types)(\(.+\))?: .{1,50}/
if (!commitRE.test(msg)) {
console.log(msg)
console.error(
` ${chalk.bgRed.white(' ERROR ')} ${chalk.red(`invalid commit message format.`)}\n\n` +
chalk.red(` Proper commit message format is required for automated changelog generation. Examples:\n\n`) +
` ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
` ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}\n\n` +
chalk.red(` See .github/COMMIT_CONVENTION.md for more details.\n`) +
chalk.red(` You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.\n`)
)
process.exit(1)
}
安装chalk包，用于输出带颜色的测试日志。
$ yarn add chalk --dev
集成Eslint
$ yarn add -D typescript eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
添加eslint配置项
$ vim .eslintrc
{
"root":true,
"env":{
"browser":true,
"node":true,
"es2021":true
},
"extends":[
"plugin:vue/vue3-recommended",
"eslint:recommended",
"@vue/typescript/recommended"
],
"parserOptions":{
"ecmaVersion":2021
}
}
在package.json的scripts属性中添加对eslint的支持
$ vim package.json
"lint":"eslint --ext .ts,vue src/** --no-error-on-unmatched-pattern"
运行命令测试
$ yarn lint
对于eslint检测出来的错误，一部分可以修复。
$ yarn lint --fix
在Git提交时只Lint暂存区文件，此时需配置gitHooks。
$ vim package.json
"gitHooks":{
"pre-commit":"lint-staged"
}
安装lint-staged包
$ yarn add -D lint-staged
在package.json中添加对lint-staged的配置
$ vim package.json
"lint-staged":{
"*.{ts,vue}":"eslint --fix"
},
集成代码美化工具
$ yarn add -D prettier eslint-plugin-prettier @vue/eslint-config-prettier
在ESlint的配置文件.eslintrc中的extends属性中添加对Prettier的配置
$ vim .eslintrc
"extends":[
"@vue/prettier",
"@vue/prettier/@typescript-eslint"
]
查看Prettier帮助
$ npx prettier --help
对项目下所有文件进行美化
$ npx prettier -w -u .
在代码提交时对缓存区中代码进行美化
$ vim package.json
"lint-staged":{
"*":"prettier -w -u"
}
配置路径别名
为Vue项目添加路径别名
$ vim vite.config.ts
import {join} from "path"
export default defineConfig({
resolve:{
alias:[
{find:"@/", replacement:join(__dirname, "src/")}
]
}
})
为TypeScript添加的路径别名添加提示功能
- 配置
tsconfig.json中compilerOptions属性的baseUrl为当前路径 - 配置
tsconfig.json中compilerOptions属性的paths，为其添加对@/别名的支持
$ vim tsconfig.json
{
"compilerOptions": {
"baseUrl":".",
"paths":{
"@/*":["src/*"]
}
}
}
对单元测试Jest配置对路径别名的支持
$ vim jest.config.js
module.exports = {
moduleNameMapper:{
"^@/(.*)$":"/src/$1"
}
};