最近学习了同学们分享的 pnpm 和 monorepo ，趁热打铁利用学到的知识来搭建一个组件库。在开发组件之前首先要确定一下开发用到的框架、插件等，在基础设施搭建完成之后就可以专心进行组件的开发了，假设有多人协作也就不会有千人千面的情况了。
本项目将使用：
🔩 vue3 + ts 来开发组件及使用文档；
📦 pnpm 作为包管理工具；monorepo 作为项目管理方式，将 components 和 doc 项目放在同一个代码库里来管理；
🛠 eslint + stylelint 配置和检测代码规范；
⚡️ 利用 vite 脚手架对组件库进行打包，发布到 npm 上。
开发环境
- node v18.7.0
- pnpm v7.9.0
- npm v8.15.0
安装 pnpm
🐂 npm install -g pnpm 全局安装 pnpm
🐂 运行 pnpm init 会生成一个 package.json 文件
🐂 pnpm install 安装所有依赖；pnpm add *** 安装依赖包； 更多pmpm add命令
🐂 pnpm run 运行 script 脚本
使用 vite 脚手架初始化 vue3 + ts 项目
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
pnpm create vite
✔ Project name: … examples
✔ Select a framework: › vue
✔ Select a variant: › vue-ts
cd examples
pnpm install
pnpm run dev
或者直接使用模板命令 pnpm create vite examples --template vue-tsc
将 example/package.json 的 name 改为 @unclejia/examples 用来开发组件示例项目。
实现 monorepo
🍻 创建 packages
- 在项目跟路径下创建
packages目录用来存放workspace子项目components和utils分别用来存放 组件库 和 工具库； - 分别在
packages/componentspackages/utils执行pnpm install生成package.json将 name 分别修改成@unclejia/components@unclejia/utils，该名称将来会用在npm发布。
🍻 pnpm-workspace.yaml 关联子项目
创建文件 pnpm-workspace.yaml 包含子项目所在的目录 packages。若有多个目录继续往下添加即可。
packages:
- 'packages/**'
- 'examples'
🍻 安装依赖
- 安装公共依赖：
pnpm install [pkg] -w；pnpm提供了参数-w,--workspace-root向根目录安装依赖；如果直接使用pnpm install vue-router -D会报错ERR_PNPM_ADDING_TO_ROOTERR_PNPM_ADDING_TO_ROOT Running this command will add the dependency to the workspace root, which might not be what you want - if you really meant it, make it explicit by running this command again with the -w flag (or --workspace-root). If you don't want to see this warning anymore, you may set the ignore-workspace-root-check setting to true.
- 对指定包执行命令：
pnpm --filter [@packages] [amend]；pnpm --filter @unclejia/examples install vue-router表示向@unclejia/examples包安装vue-router依赖包，其中@unclejia/examples是packages的name名称与文件夹名称无关。 - 给所有packages全部安装：
pnpm install vue-router -r给所有包都安装vue-router依赖。
🍻 启动 packages
根目录下的 package.json 增加脚本命令 "dev": "pnpm run -C examples dev"
使用 ESlint 配置代码规范
前置条件 vscode插件
- ESLint 插件
- Vetur 插件
初始化 eslint
pnpm install eslint -wD
pnpm eslint --init
安装 eslint 插件
eslint-plugin-vue@latest 用来检测 .vue 文件中的 template 和 script 以及 js 文件中的 vue 代码
@typescript-eslint/eslint-plugin@latest 使用第三方的 eslint 规则插件
@typescript-eslint/parser@latest 用来解析 ts 使 eslint 对ts文件起作用
--init配置的时候可以选择自动安装，也可以自己手动安装。💡 如果使用了
pnpm monorepo需要手动安装pnpm install eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -w
生成 .eslintrc.cjs
默认使用的vue3规则是 vue/vue3-essential，可以通过配置 extends 和 rules 配置自定义规则。
配置忽略文件
.eslintignore
lint 脚本
package.json 文件中增加执行命令 "lint": "eslint --ext .js,.ts,.vue --fix"
pnpm run lint
遇到的问题 FQA
-
.vue 文件 <script ... 报错
Parsing error: ‘＞‘ expected.eslint需要修改
.eslintrc.cjs配置"parser": "vue-eslint-parser"；若已有parser配置，将其放入parserOptions中配置。"parser": "vue-eslint-parser", "parserOptions": { "parser": "@typescript-eslint/parser", }, -
.vue文件的script不提示错误打开设置界面，输入
eslint.validate选择在settiong.json中编辑。或者 shift + command + p 👉
setting json👉 打开设置"eslint.validate": [ "javascript", "ts", "vue", "html" ] -
保存时自动格式化
vscode setting json 增加配置
"editor.codeActionsOnSave": { "source.fixAll": true, },
使用 stylelint 配置样式规范
前置条件 vscode插件
- Stylelint 插件
初始化 eslint
pnpm install stylelint -wD
安装依赖
pnpm install stylelint-config-standard stylelint-config-standard -wD
- stylelint-config-standard 通用的配置规则
- stylelint-config-standard 是用来检验
.vue文件中的样式 - stylelint-order 用来指定样式的书写顺序
.stylelintrc.cjs 配置规则
module.exports = {
"extends": [
"stylelint-config-standard"
],
"plugins": [
"stylelint-order"
],
"overrides": [],
"ignoreFiles": [],
"rules": {
"order/properties-order": [] // 指定书写顺序
}
}
配置忽略文件
.stylelintignore文件 或.stylelintrc.cjs文件的ignoreFiles
lint 脚本
package.json 文件中增加执行命令 "lint:style": "stylelint \"./**/*.{css,vue,html}\" --fix"
pnpm run lint:style
遇到问题
.vue文件提示Unknown word (CssSyntaxError)错误
-
.vue文件 style 不提示错误 打开设置界面输入 stylelint.validate 添加css less postcss vue scss或者在 setting.json 文件中增加配置
"stylelint.validate": [ "css", "less", "postcss", "vue" ]
