Monorepo pnpm 模式管理多个 web 项目

Monorepo pnpm 模式管理多个 web 项目

项目地点

• Vue: Monorepo pnpm 模式管理多个 web 项目（Vue3)
  
• Nuxt:Monorepo pnpm 模式管理多个 web 项目（Nuxt)
  

git flow 工作流程

• 参考链接：[https://danielkummer.github.io/git-flow-cheatsheet/index.zh_CN.html]
  
• 新建功能
  
  
  
  • 新建feature分支
    
  1. git checkout -b feature/MYFEATURE
  2. git flow feature start MYFEATURE

  复制代码
    
  
  
  
  • 完成新功能开发，将feature分支合并到develop分支
    
  • 现在已写成文件，直接执行命令 yarn feature即可
    
  1. git flow feature finish MYFEATURE

  复制代码
    
  
  
  
  • 基于最新的develop分支，切出release分支，此版本为预发布版本，分支为版本号
    
  1. git checkout -b release/1.0.0
  2. git flow release start release/1.0.0

  复制代码
    
  
  
  
  • 测试无问题， 执行git flow release finish 1.0.0 ，输出提交日志，合并到develop分支和mian/master分支，输入版本信息
    
  1. # -m tag提交信息
  2. # 参数参考：https://github.com/nvie/gitflow/wiki/Command-Line-Arguments#hotfix
  3. git flow release finish 1.0.0 -m ""

  复制代码
    
  
  
  
  • 在develop分支，并推送develop分支到长途
    
  1. git push origin develop

  复制代码
    
  
  
  
  • 切换到main/master 分支, 推送到长途，推送最新的tag到长途
    
  1. git push origin main
  2. git push origin v1.0.0

  复制代码
  
  
• bug修改
  
  
  
  • 新增一个hotfix分支
    
  1. git checkout -b hotfix/1.0.1
  2. git flow hotfix start 1.0.1

  复制代码
    
  
  
  
  • 修改完成后的操作与release一样
    
  
  

pnpm workspace

• 创建 pnpm-workspace.yaml 文件
  

1. touch pnpm-workspace.yaml

复制代码

• pnpm-workspace.yaml
  

1. packages:
2.   - 'packages/*' # 代表所有项目都放在packages文件夹之下

复制代码

.npmrc

1. # 注释：三方依赖也有依赖，要是项目中使用了第三方的依赖，
2. # 要是哪天第三方卸载不在该包了，那就找不到了，称之为“幽灵依赖” ，
3. # 所以需要“羞耻提升”，暴露到外层中，即在根目录下的node_modules内，而非在.pnpm文件夹中。
5. shamefully-hoist = true
7. # 根目录下的node_modules里，vue安装到了与.pnpm同层级位置当中了，
8. # 这就是shamefully-hoist = true的效果，把vue从.pnpm内提到node_modules中，
9. # 并且vue的相关依赖，也拍平到了该层级文件夹中。

复制代码

初始化项目架构

• Conventional Changelog 生态探索: https://zhuanlan.zhihu.com/p/392303778
  

1. # 初始化package.json
2. pnpm init
3. # 初始化项目
4. pnpm run init
5. # git flow init 前需要 执行 git init
6. # 每修改一次filter-flow-hotfix-finish-tag-message.sh,filter-flow-release-finish-tag-message.sh 需要重新init

复制代码

• package.json
  

1. {
2.         "script": {
3.                 "init": "sh ./scripts/shell/init.sh --all"
4.         }
5. }

复制代码

• init.sh
  

1. # 项目初始化
3. # 初始化项目配置
4. SCRIPTPATH=$(pwd -P)
6. # 初始化git设置
7. git config core.filemode false
8. git config tag.sort version:refname
9. git config pull.rebase true
11. if [ $1 ]; then
13.     # 安装 editorconfig 扩展
14.     command -v code && code --install-extension editorconfig.editorconfig || echo "Make sure your IDEs support for \`EditorConfig\`. You can check by https://editorconfig.org/"
16.     # 设置git filter-flow-hotfix-finish-tag-message hook 软连接
17.     rm -f ./.git/hooks/filter-flow-hotfix-finish-tag-message
18.     chmod +x $SCRIPTPATH/scripts/shell/filter-flow-hotfix-finish-tag-message.sh
19.     ln -s $SCRIPTPATH/scripts/shell/filter-flow-hotfix-finish-tag-message.sh ./.git/hooks/filter-flow-hotfix-finish-tag-message
21.     # 设置git filter-flow-release-finish-tag-message hook 软连接
22.     rm -f ./.git/hooks/filter-flow-release-finish-tag-message
23.     chmod +x $SCRIPTPATH/scripts/shell/filter-flow-release-finish-tag-message.sh
24.     ln -s $SCRIPTPATH/scripts/shell/filter-flow-release-finish-tag-message.sh ./.git/hooks/filter-flow-release-finish-tag-message
26.     # 初始化git-flow设置
27.     git config gitflow.branch.master master
28.     git config gitflow.branch.develop develop
29.     git config gitflow.prefix.versiontag v
30.     git config gitflow.path.hooks $SCRIPTPATH/.git/hooks
31.     git flow init
32. fi
35. if [ $? -eq 0 ]; then
36.     echo 'init finish'
37. else
38.     echo 'init failed'
39. fi

复制代码

• filter-flow-hotfix-finish-tag-message.sh,filter-flow-release-finish-tag-message.sh
  
  
  
  • git flow 工作流钩子，用于release，hotfix 打版，自定义两个命令增长中途写入CHANGELOG的功能
    
  • 执行git flow release finish 和 git flow hotfix finish 工作流时，会执行hooks中的filter-flow-hotfix-finish-tag-message.sh,filter-flow-release-finish-tag-message.sh
    
  • 具体参考：https://github.com/jaspernbrouwer/git-flow-hooks/blob/master/filter-flow-hotfix-finish-tag-message
    
  
  
• filter-flow-hotfix-finish-tag-message.sh, filter-flow-release-finish-tag-message.sh
  
• 为保证CHANGELOG正常写入，release的命名格式为xxx-tagname，tagname和提交时的scope保持同等
  

1. #!/usr/bin/env bash
3. # Runs during git flow release finish and a tag message is given
4. #
5. # Positional arguments:
6. # $1 Message
7. # $2 Full version
8. #
9. # Return MESSAGE
10. #
11. # The following variables are available as they are exported by git-flow:
12. #
13. # MASTER_BRANCH - The branch defined as Master
14. # DEVELOP_BRANCH - The branch defined as Develop
16. MESSAGE=$1
17. VERSION=$2
18. # 同步远程tag，防止本地打版写入多个版本changelog-needed
19. git fetch --tags
21. BEHIND_COMMIT=$(git rev-list --count ..origin/develop)
22. ROOT_DIR=$PWD
23. # 根据tag来截取需要写入日志的package
24. PACKAGE=${VERSION#*-}
25. # 获取需要写入日志的package最近的一个tag
26. PREVIOUSTAG=$(git tag -l | grep $PACKAGE | tail -n 1)
27. # 获取semver格式的版本号
28. PACKAGE_VERSION=${VERSION%%-*}
30. # 获取两个tag之间的changelog信息
31. CHANGELOG_MESSAGE=`pnpm cross-env PACKAGE=$PACKAGE PREVIOUS_TAG=$PREVIOUSTAG CURRENT_TAG=$VERSION  conventional-changelog -p custom-config -i -n ./scripts/changelog/changelog-option.cjs | tail -n +4 | sed '$d' | sed 's/(changelog-needed)/ /g'`
33. # 判断是否需要rebase，落后于target branch合并会失败
34. [ $BEHIND_COMMIT -ne 0 ] && { echo 'Please rebase develop before finishing this branch'; exit 1; }
36. isMono=$(echo $VERSION | grep "mono")
38. # 判断是否为mono的更新，是的话changelog会更新到changelogs目录的mono.md内
39. if [[ "$isMono" != "" ]]; then
40.     # 更新版本号
41.     pnpm version --new-version ${PACKAGE_VERSION/v/} --no-git-tag-version > /dev/null
42.     TEMP_CHANGELOG_MESSAGE=$(echo "### $PACKAGE_VERSION";git log -1 --pretty="#### %ci";printf "\n";echo "${CHANGELOG_MESSAGE}";printf "\n---\n\n";cat ./changelogs/mono.md)
43.     echo "$TEMP_CHANGELOG_MESSAGE" > ./changelogs/mono.md
44. # 否则更新到changelogs目录对应package的package.md内
45. else
46.     TEMP_CHANGELOG_MESSAGE=$(echo "### $PACKAGE_VERSION";git log -1 --pretty="#### %ci";printf "\n";echo "${CHANGELOG_MESSAGE}";printf "\n---\n\n";cat ./changelogs/$PACKAGE.md)
47.     echo "$TEMP_CHANGELOG_MESSAGE" > ./changelogs/$PACKAGE.md
48. fi
49. git add . > /dev/null
50. git commit --amend --no-edit --no-verify > /dev/null
52. echo $MESSAGE
54. exit 0

复制代码

• 设置commit规范以及自动生成CHNAGELOG并自定义必要的依赖包
  

1. # conventional-changelog-cli 要配合conventional-changelog-custom-config使用，指定版本为@^2
2. # conventional-changelog-custom-config参考：https://itxiaohao.github.io/passages/git-commit/#%E6%B7%B1%E5%85%A5-conventional-changelog-%E6%BA%90%E7%A0%81
3. # lerna 要配合 cz-lerna-changelog 使用，指定版本为@^3.22.1
4. #  cz-lerna-changelog参考：https://www.npmjs.com/package/cz-lerna-changelog
6. # -w 有工作区的时候使用
7. pnpm add @commitlint/cli @commitlint/config-conventional commitizen conventional-changelog-cli@^2.2.2 conventional-changelog-custom-config cz-lerna-changelog lerna@^3.22.1 -D -w
9. pnpm add cross-env -w

复制代码

• 添加comitizen相应设置，创建commitlint.config.js
  

1. touch commitlint.config.js

复制代码

1. const fs = require('fs')
2. const path = require('path')
4. module.exports = {
5.         extends: ['monorepo'],
6.         rules: {
7.                 'header-max-length': [0, 'always'],
8.                 // scope 不允许为空，保证CHANGELOG正常写入，release的命名格式为xxx-tagname，tagname和scope保持一致
9.                 'scope-empty': [2, 'never'],
10.                 'scope-enum': [2, 'always', [...fs.readdirSync(path.join(__dirname, 'packages')), 'mono']],
11.                 'type-enum': [2, 'always', ['build', 'ci', 'chore', 'feat', 'fix', 'refactor', 'style', 'test', 'config', 'docs']],
12.                 'close-issue-needed': [2, 'always'],
13.         },
14.         plugins: [
15.                 {
16.                         rules: {
17.                                 'close-issue-needed': (msg) => {
18.                                         const ISSUES_CLOSED = 'ISSUES CLOSED:'
19.                                         return [msg.raw.includes(ISSUES_CLOSED), 'Your commit message must contain ISSUES message']
20.                                 },
21.                         },
22.                 },
23.         ],
24. }

复制代码

• 自定定义CHANGELOG设置 changelog-option.cjs
  

1. const path = require('path')
2. const compareFunc = require('compare-func')
4. // 自定义配置
5. let pkgJson = {}
6. try {
7.         pkgJson = require(path.join(__dirname, '../../package.json'))
8. } catch (err) {
9.         console.error('no root package.json found')
10. }
12. const { changelog } = pkgJson
13. let bugsUrl = changelog ? changelog.bugsUrl || false : false
14. if (typeof bugsUrl !== 'string') bugsUrl = false
15. const authorName = changelog ? changelog.authorName || false : false
16. const authorEmail = changelog ? changelog.authorEmail || false : false
18. let gitUserInfo = ''
19. if (authorName && authorEmail) {
20.         gitUserInfo = 'by: **{{authorName}}** ({{authorEmail}})'
21. }
22. if (authorName && authorEmail === false) {
23.         gitUserInfo = 'by: **{{authorName}}**'
24. }
25. if (authorName === false && authorEmail) {
26.         gitUserInfo = 'by: ({{authorEmail}})'
27. }
29. const getWriterOpts = () => {
30.         return {
31.                 transform: (commit, context) => {
32.                         let discard = true
33.                         const issues = []
35.                         commit.notes.forEach((note) => {
36.                                 note.title = 'BREAKING CHANGES'
37.                                 discard = false
38.                         })
40.                         if (commit.type === 'feat') {
41.                                 commit.type = 'Features'
42.                         } else if (commit.type === 'fix') {
43.                                 commit.type = 'Bug Fixes'
44.                         } else if (commit.type === 'perf') {
45.                                 commit.type = 'Performance Improvements'
46.                         } else if (commit.type === 'revert') {
47.                                 commit.type = 'Reverts'
48.                         } else if (commit.type === 'docs') {
49.                                 commit.type = 'Documentation'
50.                         } else if (commit.type === 'style') {
51.                                 commit.type = 'Styles'
52.                         } else if (commit.type === 'refactor') {
53.                                 commit.type = 'Code Refactoring'
54.                         } else if (commit.type === 'test') {
55.                                 commit.type = 'Tests'
56.                         } else if (commit.type === 'build') {
57.                                 commit.type = 'Build System'
58.                         } else if (commit.type === 'ci') {
59.                                 commit.type = 'Continuous Integration'
60.                         } else if (commit.type === 'chore') {
61.                                 commit.type = 'Chores'
62.                         } else if (discard) {
63.                                 return
64.                         }
66.                         if (commit.scope === '*') {
67.                                 commit.scope = ''
68.                         }
70.                         if (typeof commit.hash === 'string') {
71.                                 commit.hash = commit.hash.substring(0, 7)
72.                         }
74.                         if (typeof commit.subject === 'string') {
75.                                 let url = context.repository ? `${context.host}/${context.owner}/${context.repository}` : context.repoUrl
76.                                 if (url) {
77.                                         url = `${url}/issues/`
78.                                         // Issue URLs.
79.                                         commit.subject = commit.subject.replace(/#([0-9]+)/g, (_, issue) => {
80.                                                 issues.push(issue)
81.                                                 return `[#${issue}](${url}${issue})`
82.                                         })
83.                                 }
84.                                 if (context.host) {
85.                                         // User URLs.
86.                                         commit.subject = commit.subject.replace(/\B@([a-z0-9](?:-?[a-z0-9/]){0,38})/g, (_, username) => {
87.                                                 if (username.includes('/')) {
88.                                                         return `@${username}`
89.                                                 }
91.                                                 return `[@${username}](${context.host}/${username})`
92.                                         })
93.                                 }
94.                         }
95.                         // remove references that already appear in the subject
96.                         commit.references = commit.references.filter((reference) => {
97.                                 if (!issues.includes(reference.issue)) {
98.                                         return true
99.                                 }
101.                                 return false
102.                         })
104.                         if (bugsUrl) {
105.                                 commit.references = commit.references.map((ref) => {
106.                                         return {
107.                                                 ...ref,
108.                                                 bugsUrl,
109.                                         }
110.                                 })
111.                         }
112.                         const needChangelog = commit.header.includes('(changelog-needed)') && commit.header.includes(`(${process.env.PACKAGE}):`)
113.                         // 可在此过滤所需要的commit信息
114.                         if (needChangelog) {
115.                                 commit.header = commit.header.replace(/\(changelog-needed\)/g, '')
116.                         }
117.                         return needChangelog ? commit : null
118.                 },
119.                 groupBy: 'type',
120.                 commitGroupsSort: 'title',
121.                 commitsSort: ['scope', 'subject'],
122.                 noteGroupsSort: 'title',
123.                 notesSort: compareFunc,
124.                 finalizeContext: (context) => {
125.                         return Object.assign(context, {
126.                                 version: process.env.CURRENT_TAG,
127.                                 linkCompare: false,
128.                         })
129.                 },
130.         }
131. }
133. module.exports = {
134.         gitRawCommitsOpts: {
135.                 from: process.env.PREVIOUS_TAG,
136.                 to: process.env.CURRENT_TAG,
137.         },
138.         writerOpts: getWriterOpts(),
139. }

复制代码

1. {
2.         "repository": {
3.                 "type": "git",
4.                 "url": "https://github.com/example.git"
5.         },
6.         "changelog": {
7.                 "bugsUrl": "https://github.com/",
8.                 "authorName": true,
9.                 "authorEmail": false
10.         }
11. }

复制代码

• 设置 cz-lerna-changlog,支持选择packages
  

1. const czLernaChangelog = require('cz-lerna-changelog')
3. function makePrompter() {
4.         return function (cz, commit) {
5.                 cz.prompt([
6.                         {
7.                                 type: 'confirm',
8.                                 name: 'addChangeLog',
9.                                 message: 'Auto add `(changelog-needed)` to subject line?\n',
10.                         },
11.                 ]).then((answer) => {
12.                         let customQuestion = [
13.                                 {
14.                                         type: 'input',
15.                                         name: 'subject',
16.                                         message: 'Write a short, imperative tense description of the change:\n',
17.                                         filter: function (value) {
18.                                                 const mark = (answer.addChangeLog && '(changelog-needed)') || ''
19.                                                 return value.charAt(0).toLowerCase() + value.slice(1) + mark
20.                                         },
21.                                         validate: function (value) {
22.                                                 return !!value
23.                                         },
24.                                 },
25.                         ]
26.                         return czLernaChangelog.makePrompter(() => customQuestion)(cz, commit)
27.                 })
28.         }
29. }
31. module.exports = {
32.         prompter: makePrompter(),
33.         makePrompter: makePrompter,
34. }

复制代码

1. {
2.         "config": {
3.                 "commitizen": {
4.                         "path": "./scripts/changelog/cz-lerna-changelog.cjs"
5.                 }
6.         },
7.         "workspaces": ["packages/*"]
8. }

复制代码

引入Husky规范git提交

• 安装 husky
  

1. pnpm add husky -D -w

复制代码

• 在 package.json 中 scripts 中设置 prepare 钩子:husky install,在使用pnpm install的时间就会自动执行husky,以便于别人拉取完我们代码进行pnpm insall的时间直接进行husky install（版本8操作，版本9直接执行 init）
  

1. pnpm pkg set scripts.prepare="husky install"

复制代码

或者

1. {
2.         "scripts": {
3.                 "prepare": "husky install"
4.         }
5. }

复制代码

• 执行install， 生成.husky文件夹
  

1. # 版本 8
2. npx husky install
4. #版本9
5. npx husky init

复制代码

• 添加一个 commit 钩子文件
  

1. # 版本8
2. npx husky add .husky/pre-commit
3. # 版本8 .husky/commit-msg 中添加npx --no -- commitlint --edit "$1"
4. npx --no -- commitlint --edit "$1"
5. # 版本9
6. echo 'npx --no -- commitlint --edit "$1"' > .husky/commit-msg
7. # .husky/pre-commit中写入以下命令，配合eslint使用
8. pnpm run lint-staged

复制代码

设置eslint和prettier

eslint 设置

• 安装依赖包
  

1. # eslint eslint依赖包
2. # eslint-config-standard JavaScript标准样式的ESLint可配置，基础配置,比较流行的有 airbnb、standard、prettier等
3. # eslint-plugin-import 支持ES6以上的导入/导出语法，并防止文件路径和导入名称拼写错误的问题
4. # eslint-plugin-node 为node准备的eslint规则配置
5. # eslint-plugin-promise es语法promise的eslint最佳配置
6. # eslint-plugin-vue vue项目的的配置，vue项目必须
7. # @typescript-eslint/parser 解析器
8. # @typescript-eslint/eslint-plugin  ts语法的配置
9. # eslint-define-config eslint-define-config可以帮助我们做语法提示
10. pnpm add eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-define-config -D -w

复制代码

• 根目录下创建.eslintrc.cjs、.eslintignore文件
  

1. // .eslinttrc.cjs
2. // eslint-define-config可以帮助我们做语法提示
3. const { defineConfig } = require('eslint-define-config')
5. module.exports = defineConfig({
6.         // ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
7.         root: true,
8.         // 解析器
9.         parser: 'vue-eslint-parser',
10.         parserOptions: {
11.                 // 解析器
12.                 parser: '@typescript-eslint/parser',
13.                 // js的版本
14.                 ecmaVersion: 2020,
15.                 // 模块化方案
16.                 sourceType: 'module',
17.                 ecmaFeatures: {
18.                         jsx: true,
19.                 },
20.         },
21.         // 启用的规则
22.         extends: ['plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'standard'],
23.         rules: {
24.                 quotes: ['error', 'single'],
25.                 '@typescript-eslint/ban-ts-ignore': 'off',
26.                 '@typescript-eslint/explicit-function-return-type': 'off',
27.                 '@typescript-eslint/no-explicit-any': 'off',
28.                 '@typescript-eslint/no-var-requires': 'off',
29.                 '@typescript-eslint/no-empty-function': 'off',
30.                 '@typescript-eslint/no-use-before-define': 'off',
31.                 '@typescript-eslint/ban-ts-comment': 'off',
32.                 '@typescript-eslint/ban-types': 'off',
33.                 '@typescript-eslint/no-non-null-assertion': 'off',
34.                 '@typescript-eslint/explicit-module-boundary-types': 'off',
35.                 '@typescript-eslint/no-unused-vars': [
36.                         'error',
37.                         {
38.                                 argsIgnorePattern: '^h$',
39.                                 varsIgnorePattern: '^h$',
40.                         },
41.                 ],
42.                 'no-use-before-define': 'off',
43.                 'no-unused-vars': [
44.                         'error',
45.                         {
46.                                 argsIgnorePattern: '^h$',
47.                                 varsIgnorePattern: '^h$',
48.                         },
49.                 ],
50.                 'no-tabs': 'off',
51.                 indent: 'off',
52.                 'vue/custom-event-name-casing': 'off',
53.                 'vue/html-indent': 'off',
54.                 'vue/max-attributes-per-line': 'off',
55.                 'vue/html-self-closing': 'off',
56.                 'vue/singleline-html-element-content-newline': 'off',
57.                 'vue/multi-word-component-names': 'off',
58.                 'space-before-function-paren': 'off',
59.                 'comma-dangle': 'off',
60.         },
61. })

复制代码

1. .eslintignore
2. node_modules
3. .vscode
4. .idea
5. dist
6. .eslintrc.cjs

复制代码

prettier 设置

• 安装依赖
  

1. # eslint-config-prettier&eslint-plugin-prettier  用于解决eslint和prettier的冲突问题
2. pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D -w

复制代码

• 根目录创建.prettierrc文件
  

1. {
2.         "printWidth": 150,
3.         "tabWidth": 2,
4.         "useTabs": true,
5.         "semi": false,
6.         "singleQuote": true,
7.         "quoteProps": "as-needed",
8.         "jsxSingleQuote": false,
9.         "trailingComma": "es5",
10.         "bracketSpacing": true,
11.         "jsxBracketSameLine": false,
12.         "arrowParens": "always",
13.         "rangeStart": 0,
14.         "requirePragma": false,
15.         "insertPragma": false,
16.         "proseWrap": "preserve",
17.         "htmlWhitespaceSensitivity": "css",
18.         "vueIndentScriptAndStyle": false,
19.         "endOfLine": "auto"
20. }

复制代码

• 根目录创建.prettierignore文件用于忽略prewitter格式化
  
• 安装 VSCode 插件 Prettier - Code formatter
  
  
  
  • 安装该插件以实现在保存的时间自动完成格式化
    
  
  
• 在 .vscode/settings.json 中添加一下规则
  

1. {
2.         // 保存的时候自动格式化
3.         "editor.formatOnSave": true,
4.         // 默认格式化工具选择prettier
5.         "editor.defaultFormatter": "esbenp.prettier-vscode"
6. }

复制代码

设置lint-staged

• 提交前在pre-commit中应该做一次lint 校验，在package.json添加
  

1. {
2.         "scripts": {
3.                 "lint:script": "eslint --ext .js,.jsx,.vue,.ts,.tsx --fix --quiet ./"
4.         }
5. }

复制代码

• 在pre-commit 中添加命令 npm lint:script
  
• 根据上面的设置是可以实现我们想要的效果的,但是我们会发现每次提交代码的时间 ESlint 或 Stylelint 都会检查所有文件,而我们必要的是只让它们检测新增的文件,因此我们可以使用lint-staged来解决这个问题
  
• 安装lint-staged
  

1. pnpm add lint-staged -D -w

复制代码

• 在package.json中添加设置,更改pre-commit的命令 pnpm run lint-staged
  

1. {
2.         "lint-staged": {
3.                 "src/**/*.{js,jsx,ts,tsx,vue}": ["eslint --ext .js,.jsx,.vue,.ts,.tsx --fix --quiet ./"]
4.         },
5.         "scripts": {
6.                 "lint-staged": "lint-staged"
7.         }
8. }

复制代码

创建项目

创建shared

• shared项目用来服务其他多个web项目，提供公共方法、组件、样式等等
  

项目全局安装 vue

1. # -w的意思是，workspace-root把依赖包安装到工作目录的根路径下，
2. # 则根目录下会生成node_modules文件夹。可以共用，后续每个项目需要用到vue的
3. # 都直接从根目录node_modules里取。
4. pnpm add vue -w

复制代码

在 packages 项目下创建 vue 项目

• 执行创建命令，根据提示选择
  

1. pnpm create vite

复制代码

• 删除 vue @vitejs/plugin-vue vite vue-tsc typescript 等依赖，安装到全局中
  

1. # 子项目下执行
2. pnpm remove vue
3. pnpm remove @vitejs/plugin-vue vite vue-tsc typescript -D
4. # 根目录下执行
5. pnpm add @vitejs/plugin-vue vite vue-tsc typescript -D -w

复制代码

• 运行项目
  

1. # 子项目下运行
2. pnpm dev

复制代码

设置全局指令

1. {
2.         "script": {
3.                 "dev:project": "cd packages/vite-project & pnpm dev"
4.                 // pnpm -C packages/vue-config-1 & pnpm dev 亦可
5.         }
6. }

复制代码

引用 shared 内容

• 加入 tsconfig.json 来设置路径
  

1. # 根目录下
2. pnpm add typescript -D -w
3. pnpm tsc --init

复制代码

• 设置
  

1. {
2.         "compilerOptions": {
3.                 "outDir": "dist", // 输出的目录
4.                 "sourceMap": true, //采用sourcemap
5.                 "target": "es2016", // 目标语法
6.                 "module": "esnext", // 模块格式
7.                 "moduleResolution": "node", // 模块解析
8.                 "strict": false, // 严格模式
9.                 "resolveJsonModule": true, // 解析json模块
10.                 "esModuleInterop": true, // 允许通过es6语法引入commonjs模块
11.                 "jsx": "preserve", // jsx不转义
12.                 "lib": ["esnext", "dom"], // 支持的类库esnext及dom
13.                 "baseUrl": ".", // 当前是以该路径进行查找
14.                 "paths": {
15.                         "@monorepo/shared/components": ["packages/shared/components"],
16.                         "@monorepo/shared/utils": ["packages/shared/utils"],
17.                         "@monorepo/shared/fetch": ["packages/shared/fetch"],
18.                         "@monorepo/shared/styles": ["packages/shared/styles"],
19.                         // 或者用*号处理匹配
20.                         "@monorepo/shared/*": ["packages/shared/*"]
21.                 }
22.         }
23. }

复制代码

建立关联

1. # 指定版本号
2. pnpm add @monorepo/shared@workspace --filter @monorepo/vite-project

复制代码

打包插件

• 安装 minimist esbuild
  

1. pnpm add minimist esbuild -D -w

复制代码

• 新增 打包脚本
  

1. // minimist 可以解析命令行参数，非常好用，功能简单
2. import minimist from 'minimist'
3. // 打包模块
4. import { build } from 'esbuild'
5. // node 中的内置模块
6. import path from 'path'
7. import fs from 'fs'
8. const __dirname = path.resolve()
9. const args = minimist(process.argv.slice(2))
10. const target = args._[0]
11. const format = args.f || 'global'
12. const entry = path.resolve(__dirname, `./packages/plugins/${target}/src/index.ts`)
13. /*  iife 立即执行函数(function(){})()
14.     cjs node中的模块 module.exports
15.     esm 浏览器中的esModule模块 import */
16. const outputFormat = format.startsWith('global') ? 'iife' : format === 'cjs' ? 'cjs' : 'esm'
17. const outfile = path.resolve(__dirname, `./packages/plugins/${target}/dist/${target}.${format}.js`)
18. const pkaPath = path.resolve(__dirname, `./packages/plugins/${target}/package.json`)
19. const pkaOps = JSON.parse(fs.readFileSync(pkaPath, 'utf8'))
20. const packageName = pkaOps.buildOptions?.name
21. build({
22.         entryPoints: [entry],
23.         outfile,
24.         bundle: true,
25.         sourcemap: true,
26.         format: outputFormat,
27.         globalName: packageName,
28.         platform: format === 'cjs' ? 'node' : 'browser',
29. }).then(() => {
30.         console.log('watching~~~')
31. })

复制代码

• 设置 plugins package.json
  

1. {
2.         "name": "@monorepo/common",
3.         "version": "1.0.0",
4.         "description": "",
5.         "main": "index.js",
6.         "scripts": {
7.                 "test": "echo "Error: no test specified" && exit 1"
8.         },
9.         // 打包会用到, 用于定义全局变量
10.         "buildOptions": {
11.                 "name": "common"
12.         },
13.         "keywords": [],
14.         "author": "",
15.         "license": "ISC",
16.         "dependencies": {
17.                 "@monorepo/shared": "workspace:^"
18.         }
19. }

复制代码

• 设置并执行打包命令
  

1. {
2.         "scripts": {
3.                 "dev:common": "node scripts/dev-plugins.js common -f global"
4.         }
5. }

复制代码

1. pnpm dev:common

复制代码

• 测试使用
  

1. <!doctype html>
2. <html lang="en">
3.         <head>
4.                 <meta charset="UTF-8" />
5.                 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6.                 <title>Document</title>
7.         </head>
8.         <body>
9.                 <script src="./common.global.js"></script>
10.                 <script>
11.                         const { testFunc } = common
12.                         console.log(testFunc())
13.                 </script>
14.         </body>
15. </html>

复制代码

设置单命令启动多项目

1. {
2.         "scripts": {
3.                 "serve": "node ./scripts/build/build.cjs",
4.                 "build": "node ./scripts/build/build.cjs --production"
5.         }
6. }

复制代码

• build.cjs
  

1. const { spawn } = require('child_process')
2. const core = require('./core.cjs')
3. const path = require('path')
5. class BuildCore extends core {
6.         constructor(optionArray = []) {
7.                 super()
8.                 this.initOption(optionArray)
9.                 this.start()
10.         }
12.         /**
13.          * @description 执行构建流程
14.          */
15.         start() {
16.                 this.getPackages().then(async () => {
17.                         this._argument = this._program.parse(process.argv).args
18.                         try {
19.                                 const answer = await this.selectPackage()
20.                                 answer && this._argument.unshift(answer)
21.                                 this.initBuildSpawn()
22.                         } catch (error) {
23.                                 console.error('the application must be selected!')
24.                         }
25.                 })
26.         }
28.         /**
29.          * @description 初始化本地开发或者构建build过程
30.          */
31.         initBuildSpawn() {
32.                 if (!this.validatePackage()) return false
33.                 const isProduction = this._program.parse(process.argv).production
34.                 process.env.PACKAGE = this._argument[0]
35.                 process.env.NODE_ENV = isProduction ? 'production' : 'development'
36.                 const args = isProduction ? ['build'] : ['dev']
37.                 const clinetPath = path.resolve(__dirname, `../../packages/${process.env.PACKAGE}/`)
38.                 try {
39.                         const clientSpawnInstance = spawn('pnpm', ['-C', clinetPath, args], {
40.                                 stdio: 'inherit',
41.                                 shell: true, // 兼容部分win10系统Error: spawn yarn ENOENT报错
42.                         })
43.                         this.registErrorHandle(clientSpawnInstance)
44.                 } catch (error) {
45.                         console.log(error)
46.                 }
47.         }
48. }
50. new BuildCore([
51.         {
52.                 short: '-p',
53.                 long: '--production',
54.                 description: 'build package in production mode',
55.         },
56. ])

复制代码

• core.js
  

1. /**
2. * 操作终端面板，选择项目启动
3. * 思路：读取packages下的文件，获取每个项目的名称，存到项目数组中（this._packageArray） getPackages
4. * 根据项目数组构建命令行选择器，选择对应的项目 selectPackage
5. */
7. const process = require('process')
8. const fs = require('fs')
9. const path = require('path')
10. const { Command } = require('commander')
11. const { Select } = require('enquirer')
13. class Core {
14.         constructor() {
15.                 // 项目数组
16.                 this._packageArray = []
18.                 // 命令实例
19.                 this._program = new Command()
20.         }
22.         /**
23.          * @description 选择应用
24.          * @return Promise
25.          */
26.         selectPackage() {
27.                 // 深拷贝应用数组
28.                 const packages = JSON.parse(JSON.stringify(this._packageArray))
30.                 // 判断选择的包是否包含在应用数组中，包含则返回Promise成功状态
31.                 if (this._argument && packages.includes(this._argument[0])) return Promise.resolve()
33.                 // 终端命令行选择
34.                 const prompt = new Select({
35.                         name: 'apps',
36.                         message: 'Please select the application to run',
37.                         choices: packages,
38.                 })
40.                 return prompt.run()
41.         }
43.         /**
44.          * @description 初始化自定义command参数
45.          * @param {Object[]} optionArray 自定义参数数组
46.          * @param {String} optionArray[].short 自定义参数缩写，如 -p
47.          * @param {String} optionArray[].long 自定义参数全称， 如 --production
48.          * @param {String} optionArray[].description 自定义参数作用的描述
49.          */
50.         initOption(optionArray) {
51.                 optionArray.forEach((obj) => {
52.                         this._program.option(`${obj.short}, ${obj.long}`, obj.description)
53.                 })
54.         }
56.         /**
57.          * @description 检测自定义的package参数是否匹配packages目录下的项目
58.          */
59.         validatePackage() {
60.                 let pass = true
61.                 if (!this._packageArray.includes(this._argument[0])) {
62.                         console.error(`package param should be one of [${this._packageArray.join(',')}]`)
63.                         console.log('eg: yarn <script> auth-overseas')
64.                         pass = false
65.                 }
66.                 return pass
67.         }
69.         /**
70.          * @description 获取packages目录下的项目
71.          */
72.         getPackages() {
73.                 return new Promise((resolve, reject) => {
74.                         // 读取packages下的文件
75.                         fs.readdir(path.join(__dirname, '../../packages'), { withFileTypes: true }, (err, dir) => {
76.                                 if (err) reject(err)
77.                                 // 将目录的文件名筛选读取，添加到应用数组中
78.                                 this._packageArray = dir
79.                                         .filter((i) => {
80.                                                 const typeKey = Object.getOwnPropertySymbols(i)[0]
81.                                                 return i.name !== 'plugins' && i.name !== 'shared' && i[typeKey] === 2
82.                                         })
83.                                         .map((j) => j.name)
84.                                 resolve()
85.                         })
86.                 })
87.         }
89.         /**
90.          * @description 注册对子进程错误进行异常处理
91.          * @param {Object} spawnInstance 子进程
92.          * @param {Function} callback 子进程执行完成后回调
93.          * @param {Function} errorCallback 子进程执行报错后回调
94.          */
95.         registErrorHandle(spawnInstance, callback, errorCallback) {
96.                 spawnInstance.on('error', (err) => {
97.                         console.log(err)
98.                         errorCallback && errorCallback(err)
99.                         process.exit(1)
100.                 })
102.                 spawnInstance.on('exit', (code) => {
103.                         callback && callback()
104.                         // code = 0表示流程正常
105.                         if (code !== 0) {
106.                                 process.exit(1)
107.                         }
108.                 })
109.         }
110. }
112. module.exports = Core

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。