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添加的路径别名添加提示功能

1. 配置tsconfig.json中compilerOptions属性的baseUrl为当前路径
2. 配置tsconfig.json中compilerOptions属性的paths，为其添加对@/别名的支持

$ vim tsconfig.json

{
  "compilerOptions": {
    "baseUrl":".",
    "paths":{
      "@/*":["src/*"]
    }
  }
}

对单元测试Jest配置对路径别名的支持

$ vim jest.config.js

module.exports = {
  moduleNameMapper:{
    "^@/(.*)$":"<rootDir>/src/$1"
  }
};