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創(chuàng)建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

創(chuàng)建測試目錄

$ mkdir -p tests/unit

創(chuàng)建單元測試腳本玖姑，默認規(guī)定單元測試文件以*.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"
},

執(zhí)行測試命令

$ 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解析代碼的規(guī)則

$ vim babel.config.js 

module.exports = {
    presets:[["@babel/preset-env", {targets:{node:"current"}}]]
}

安裝預設

$ yarn add @babel/preset-env --dev

測試環(huán)境

$ 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環(huán)境的UI自動化測試工具弦叶，也是一種E2E（End to End）測試框架，用于解決開發(fā)者與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目錄后創(chuàng)建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單元測試會發(fā)現與yarn test:e2e相互沖突七问，解決的方案是在根目錄下的tsconfig.json的include選項中只包含tests/unit蜓耻。然后在tests/e2e目錄下創(chuàng)建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"],
    }
}

默認執(zhí)行cypress open時會重新開啟一個窗口械巡，若希望在終端中執(zhí)行刹淌，則需要直接在命令行中直接執(zhí)行命令：

$ npm cypress run

在package.json的scripts自定義腳本命令中添加新的命令

$ vim package.json

"test:e2e-cli":"cypress run"

集成代碼質量檢查工具

pre-commit鉤子用于代碼質量檢查，使用yorkie使得鉤子能夠從package.json中的gitHooks屬性中讀取讥耗。

yorkie包用來檢查commit message是否符合規(guī)范

安裝yorkie包

$ yarn add yorkie --dev

package.json配置gitHooks屬性有勾，指定Commit message的規(guī)范，規(guī)范建議采用Angular規(guī)范葛账。

$ 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暫存區(qū)文件，此時需配置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 .

在代碼提交時對緩存區(qū)中代碼進行美化

$ 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"
  }
};