这是我参与「第五届青训营 」伴学笔记创作活动的第 四 天
一、项目依赖
第一步先去看项目的依赖有哪些
package.json
{
"private": true,
"packageManager": "pnpm@7.3.0",
"workspaces": [
"packages/*",
"play",
"docs"
],
"scripts": {
"cz": "czg",
"test": "vitest",
"test:coverage": "vitest --coverage",
"test:ssr": "vitest --config ./ssr-testing/vitest.config.ts",
"prepare:e2e": "if [ ! -d \"docs/.vitepress/dist\" ]; then pnpm run docs:build; fi;",
"dev": "pnpm -C play dev",
"gen": "bash ./scripts/gc.sh",
"gen:version": "tsx scripts/gen-version.ts",
"diff:table": "tsx scripts/build-table.ts",
"update:version": "tsx scripts/update-version.ts",
"clean": "pnpm run clean:dist && pnpm run -r --parallel clean",
"clean:dist": "rimraf dist",
"build": "pnpm run -C internal/build start",
"build:theme": "pnpm run -C packages/theme-chalk build",
"format": "prettier --write --cache .",
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx,.md,.json --max-warnings 0 --cache",
"lint:fix": "pnpm run lint --fix",
"lint:commit": "commitlint --from $(git merge-base origin/dev HEAD) --to HEAD > ./commit-lint.txt",
"typecheck": "run-p typecheck:web typecheck:play typecheck:node typecheck:vite-config typecheck:vitest",
"typecheck:web": "vue-tsc -p tsconfig.web.json --composite false --noEmit",
"typecheck:node": "tsc -p tsconfig.node.json --noEmit",
"typecheck:play": "vue-tsc -p tsconfig.play.json --composite false --noEmit",
"typecheck:vite-config": "vue-tsc -p tsconfig.vite-config.json --composite false --noEmit",
"typecheck:vitest": "vue-tsc -p tsconfig.vitest.json --composite false --noEmit",
"docs:dev": "pnpm run -C docs dev",
"docs:build": "pnpm run -C docs build",
"docs:serve": "pnpm run -C docs serve",
"docs:gen-locale": "pnpm run -C docs gen-locale",
"docs:crowdin-credentials": "pnpm run -C docs crowdin-credentials",
"stub": "pnpm run -r --parallel stub",
"prepare": "husky install",
"postinstall": "pnpm stub && concurrently \"pnpm gen:version\" \"pnpm run -C internal/metadata dev\""
},
"peerDependencies": {
"vue": "^3.2.0"
},
"dependencies": {
"@element-plus/components": "workspace:*",
"@element-plus/constants": "workspace:*",
"@element-plus/directives": "workspace:*",
"@element-plus/hooks": "workspace:*",
"@element-plus/icons-vue": "^2.0.6",
"@element-plus/locale": "workspace:*",
"@element-plus/test-utils": "workspace:*",
"@element-plus/theme-chalk": "workspace:*",
"@element-plus/tokens": "workspace:*",
"@element-plus/utils": "workspace:*",
"@floating-ui/dom": "^1.0.1",
"@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
"@types/lodash": "^4.14.182",
"@types/lodash-es": "^4.17.6",
"@vueuse/core": "^9.1.0",
"async-validator": "^4.2.5",
"dayjs": "^1.11.3",
"escape-html": "^1.0.3",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"lodash-unified": "^1.0.2",
"memoize-one": "^6.0.0",
"normalize-wheel-es": "^1.2.0"
},
"devDependencies": {
"@commitlint/cli": "^17.0.3",
"@commitlint/config-conventional": "^17.0.3",
"@element-plus/build": "workspace:^0.0.1",
"@element-plus/build-utils": "workspace:^0.0.1",
"@element-plus/eslint-config": "workspace:*",
"@esbuild-kit/cjs-loader": "^2.2.1",
"@pnpm/find-workspace-packages": "^4.0.16",
"@pnpm/logger": "^4.0.0",
"@pnpm/types": "^8.4.0",
"@types/fs-extra": "^9.0.13",
"@types/gulp": "^4.0.9",
"@types/jsdom": "^16.2.14",
"@types/node": "*",
"@types/sass": "^1.43.1",
"@vitejs/plugin-vue": "^2.3.3",
"@vitejs/plugin-vue-jsx": "^1.3.10",
"@vitest/ui": "0.16.0",
"@vue/test-utils": "^2.0.0",
"@vue/tsconfig": "^0.1.3",
"c8": "^7.11.3",
"chalk": "^5.0.1",
"concurrently": "^7.2.2",
"consola": "^2.15.3",
"csstype": "^2.6.20",
"cz-git": "^1.3.8",
"czg": "^1.3.8",
"eslint": "^8.18.0",
"eslint-define-config": "^1.5.1",
"expect-type": "^0.13.0",
"fast-glob": "^3.2.11",
"husky": "^8.0.1",
"jsdom": "16.4.0",
"lint-staged": "^13.0.3",
"npm-run-all": "^4.1.5",
"prettier": "^2.7.1",
"puppeteer": "^17.1.3",
"resize-observer-polyfill": "^1.5.1",
"rimraf": "^3.0.2",
"sass": "^1.53.0",
"ts-morph": "^14.0.0",
"tsx": "^3.6.0",
"type-fest": "^2.14.0",
"typescript": "^4.7.4",
"unplugin-element-plus": "^0.4.0",
"unplugin-vue-macros": "^0.11.2",
"vitest": "0.12.6",
"vue": "^3.2.37",
"vue-router": "^4.0.16",
"vue-tsc": "^0.38.2"
},
"engines": {
"node": ">= 16"
},
"config": {
"commitizen": {
"path": "./node_modules/cz-git"
}
},
"pnpm": {
"peerDependencyRules": {
"ignoreMissing": [
"vite",
"react",
"react-dom"
]
}
},
"lint-staged": {
"*.{vue,js,ts,jsx,tsx,md,json}": "eslint --fix"
主要的依赖有（记录的是新学习的依赖）：
1.yarn的workplace：这可以创建把三个文件夹分别创建成三个不同的工作环境packages,play,docs 可以解决项目依赖的相关问题。一次install就可以将所有工作区的依赖全部打包，工作区之间也可以相互依赖 项目内部还有使用pnpm的workspace，本人也还搞不清楚为什么存在两个。。。。
"workspaces": [
"packages/*",
"play",
"docs"
],
2.test测试的部分，使用的是vitest+vue-util-test。两者结合的基本使用方式，可以参考我前面的文章
"scripts": { "...", "test": "vitest","..."}
"devDependencies": { "...","@vitest/ui": "0.16.0", "@vue/test-utils": "^2.0.0","..."}
3.jsdom 这个也是与测试的模块相辅相成的，jsdom 是许多 Web 标准的纯 JavaScript 实现。他可以模拟网页的可视化元素，例如下面代码：官方文档（github.com/jsdom/jsdom…
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
console.log(dom.window.document.querySelector("p").textContent); // "Hello world"
4.husky是和commitlint搭配使用。一起对提交（commit）的动作进行审核。husky 是一个 Git Hook 工具。husky 其实就是一个为 git 客户端增加 hook 的工具。比如在 commit stage执行的命令可以挪动到本地执行，比如 lint 检查、比如单元测试。官方文档（typicode.github.io/husky/#/） 而commitlint主要作用是检查commit时提交的信息是否规范进行一个审核[他们真的很严格，我哭死]。官方文档（github.com/conventiona…
"devDependencies": { "@commitlint/cli": "^17.0.3", "@commitlint/config-conventional": "^17.0.3",
二、项目目录
1.husky存放的是husky配置信息
2.docs是使用vitepress来配置和生成项目文档的文件夹
3.internal是项目构建（build）相关的配置
4.packages[重点]是装载所有组件的源码，他们的测试，渲染模板，钩子等等
5.play是提供组件一个实际在项目测试组件的环境，一般组件库命名规则里会命名为example
6.ssr-testing是提供ssr进行测试的一个环境
7.typings主要是全局组件，开发环境，测试环境的一些ts的类型配置
