Monorepo pnpm 模式管理多个 web 项目

已于 2024-10-09 08:48:00 修改
阅读量674 收藏 1
点赞数 1
分类专栏： # 前端工程化 文章标签： 前端 npm vue.js
于 2024-10-09 08:45:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SuihideOmelet/article/details/142773901
版权

Monorepo pnpm 模式管理多个 web 项目

Monorepo pnpm 模式管理多个 web 项目

项目地址

git flow 工作流程

  • 参考链接：[https://danielkummer.github.io/git-flow-cheatsheet/index.zh_CN.html]

  • 新建功能

    • 新建feature分支
    git checkout -b feature/MYFEATURE
git flow feature start MYFEATURE
    • 完成新功能开发，将feature分支合并到develop分支
    • 现在已写成文件，直接执行命令 yarn feature即可
    git flow feature finish MYFEATURE
    • 基于最新的develop分支，切出release分支，此版本为预发布版本，分支为版本号
    git checkout -b release/1.0.0
git flow release start release/1.0.0
    • 测试无问题， 执行git flow release finish 1.0.0 ，输出提交日志，合并到develop分支和mian/master分支，输入版本信息
    # -m tag提交信息
# 参数参考：https://github.com/nvie/gitflow/wiki/Command-Line-Arguments#hotfix
git flow release finish 1.0.0 -m ""
    • 在develop分支，并推送develop分支到远程
    git push origin develop
    • 切换到main/master 分支, 推送到远程，推送最新的tag到远程
    git push origin main
git push origin v1.0.0

  • bug修改

    • 新增一个hotfix分支
    git checkout -b hotfix/1.0.1
git flow hotfix start 1.0.1
    • 修改完成后的操作与release一样

pnpm workspace

  • 创建 pnpm-workspace.yaml 文件
 touch pnpm-workspace.yaml
  • pnpm-workspace.yaml
packages:
  - 'packages/*' # 代表所有项目都放在packages文件夹之下

.npmrc

# 注释：三方依赖也有依赖，要是项目中使用了第三方的依赖，
# 要是哪天第三方卸载不在该包了，那就找不到了，称之为“幽灵依赖” ，
# 所以需要“羞耻提升”，暴露到外层中，即在根目录下的node_modules内，而非在.pnpm文件夹中。

 shamefully-hoist = true

# 根目录下的node_modules里，vue安装到了与.pnpm同层级位置当中了，
# 这就是shamefully-hoist = true的效果，把vue从.pnpm内提到node_modules中，
# 并且vue的相关依赖，也拍平到了该层级文件夹中。

初始化项目架构

  • Conventional Changelog 生态探索: https://zhuanlan.zhihu.com/p/392303778
# 初始化package.json
pnpm init
# 初始化项目
pnpm run init
# git flow init 前需要 执行 git init
# 每修改一次filter-flow-hotfix-finish-tag-message.sh,filter-flow-release-finish-tag-message.sh 需要重新init
  • package.json
{
	"script": {
		"init": "sh ./scripts/shell/init.sh --all"
	}
}
  • init.sh
# 项目初始化

# 初始化项目配置
SCRIPTPATH=$(pwd -P)

# 初始化git设置
git config core.filemode false
git config tag.sort version:refname
git config pull.rebase true

if [ $1 ]; then

    # 安装 editorconfig 扩展
    command -v code && code --install-extension editorconfig.editorconfig || echo "Make sure your IDEs support for \`EditorConfig\`. You can check by https://editorconfig.org/"

    # 设置git filter-flow-hotfix-finish-tag-message hook 软连接
    rm -f ./.git/hooks/filter-flow-hotfix-finish-tag-message
    chmod +x $SCRIPTPATH/scripts/shell/filter-flow-hotfix-finish-tag-message.sh
    ln -s $SCRIPTPATH/scripts/shell/filter-flow-hotfix-finish-tag-message.sh ./.git/hooks/filter-flow-hotfix-finish-tag-message

    # 设置git filter-flow-release-finish-tag-message hook 软连接
    rm -f ./.git/hooks/filter-flow-release-finish-tag-message
    chmod +x $SCRIPTPATH/scripts/shell/filter-flow-release-finish-tag-message.sh
    ln -s $SCRIPTPATH/scripts/shell/filter-flow-release-finish-tag-message.sh ./.git/hooks/filter-flow-release-finish-tag-message

    # 初始化git-flow设置
    git config gitflow.branch.master master
    git config gitflow.branch.develop develop
    git config gitflow.prefix.versiontag v
    git config gitflow.path.hooks $SCRIPTPATH/.git/hooks
    git flow init
fi


if [ $? -eq 0 ]; then
    echo 'init finish'
else
    echo 'init failed'
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保持一致

#!/usr/bin/env bash

# Runs during git flow release finish and a tag message is given
#
# Positional arguments:
# $1 Message
# $2 Full version
#
# Return MESSAGE
#
# The following variables are available as they are exported by git-flow:
#
# MASTER_BRANCH - The branch defined as Master
# DEVELOP_BRANCH - The branch defined as Develop

MESSAGE=$1
VERSION=$2
# 同步远程tag，防止本地打版写入多个版本changelog-needed
git fetch --tags

BEHIND_COMMIT=$(git rev-list --count ..origin/develop)
ROOT_DIR=$PWD
# 根据tag来截取需要写入日志的package
PACKAGE=${VERSION#*-}
# 获取需要写入日志的package最近的一个tag
PREVIOUSTAG=$(git tag -l | grep $PACKAGE | tail -n 1)
# 获取semver格式的版本号
PACKAGE_VERSION=${VERSION%%-*}

# 获取两个tag之间的changelog信息
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'`

# 判断是否需要rebase，落后于target branch合并会失败
[ $BEHIND_COMMIT -ne 0 ] && { echo 'Please rebase develop before finishing this branch'; exit 1; }

isMono=$(echo $VERSION | grep "mono")

# 判断是否为mono的更新，是的话changelog会更新到changelogs目录的mono.md内
if [[ "$isMono" != "" ]]; then
    # 更新版本号
    pnpm version --new-version ${PACKAGE_VERSION/v/} --no-git-tag-version > /dev/null
    TEMP_CHANGELOG_MESSAGE=$(echo "### $PACKAGE_VERSION";git log -1 --pretty="#### %ci";printf "\n";echo "${CHANGELOG_MESSAGE}";printf "\n---\n\n";cat ./changelogs/mono.md)
    echo "$TEMP_CHANGELOG_MESSAGE" > ./changelogs/mono.md
# 否则更新到changelogs目录对应package的package.md内
else
    TEMP_CHANGELOG_MESSAGE=$(echo "### $PACKAGE_VERSION";git log -1 --pretty="#### %ci";printf "\n";echo "${CHANGELOG_MESSAGE}";printf "\n---\n\n";cat ./changelogs/$PACKAGE.md)
    echo "$TEMP_CHANGELOG_MESSAGE" > ./changelogs/$PACKAGE.md
fi
git add . > /dev/null
git commit --amend --no-edit --no-verify > /dev/null

echo $MESSAGE

exit 0
  • 配置commit规范以及自动生成CHNAGELOG并自定义需要的依赖包
# conventional-changelog-cli 要配合conventional-changelog-custom-config使用，指定版本为@^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
# lerna 要配合 cz-lerna-changelog 使用，指定版本为@^3.22.1
#  cz-lerna-changelog参考：https://www.npmjs.com/package/cz-lerna-changelog

# -w 有工作区的时候使用
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

pnpm add cross-env -w
  • 添加comitizen相应配置，创建commitlint.config.js
touch commitlint.config.js

const fs = require('fs')
const path = require('path')

module.exports = {
	extends: ['monorepo'],
	rules: {
		'header-max-length': [0, 'always'],
		// scope 不允许为空，保证CHANGELOG正常写入，release的命名格式为xxx-tagname，tagname和scope保持一致
		'scope-empty': [2, 'never'],
		'scope-enum': [2, 'always', [...fs.readdirSync(path.join(__dirname, 'packages')), 'mono']],
		'type-enum': [2, 'always', ['build', 'ci', 'chore', 'feat', 'fix', 'refactor', 'style', 'test', 'config', 'docs']],
		'close-issue-needed': [2, 'always'],
	},
	plugins: [
		{
			rules: {
				'close-issue-needed': (msg) => {
					const ISSUES_CLOSED = 'ISSUES CLOSED:'
					return [msg.raw.includes(ISSUES_CLOSED), 'Your commit message must contain ISSUES message']
				},
			},
		},
	],
}
  • 自定定义CHANGELOG配置 changelog-option.cjs
const path = require('path')
const compareFunc = require('compare-func')

// 自定义配置
let pkgJson = {}
try {
	pkgJson = require(path.join(__dirname, '../../package.json'))
} catch (err) {
	console.error('no root package.json found')
}

const { changelog } = pkgJson
let bugsUrl = changelog ? changelog.bugsUrl || false : false
if (typeof bugsUrl !== 'string') bugsUrl = false
const authorName = changelog ? changelog.authorName || false : false
const authorEmail = changelog ? changelog.authorEmail || false : false

let gitUserInfo = ''
if (authorName && authorEmail) {
	gitUserInfo = 'by: **{{authorName}}** ({{authorEmail}})'
}
if (authorName && authorEmail === false) {
	gitUserInfo = 'by: **{{authorName}}**'
}
if (authorName === false && authorEmail) {
	gitUserInfo = 'by: ({{authorEmail}})'
}

const getWriterOpts = () => {
	return {
		transform: (commit, context) => {
			let discard = true
			const issues = []

			commit.notes.forEach((note) => {
				note.title = 'BREAKING CHANGES'
				discard = false
			})

			if (commit.type === 'feat') {
				commit.type = 'Features'
			} else if (commit.type === 'fix') {
				commit.type = 'Bug Fixes'
			} else if (commit.type === 'perf') {
				commit.type = 'Performance Improvements'
			} else if (commit.type === 'revert') {
				commit.type = 'Reverts'
			} else if (commit.type === 'docs') {
				commit.type = 'Documentation'
			} else if (commit.type === 'style') {
				commit.type = 'Styles'
			} else if (commit.type === 'refactor') {
				commit.type = 'Code Refactoring'
			} else if (commit.type === 'test') {
				commit.type = 'Tests'
			} else if (commit.type === 'build') {
				commit.type = 'Build System'
			} else if (commit.type === 'ci') {
				commit.type = 'Continuous Integration'
			} else if (commit.type === 'chore') {
				commit.type = 'Chores'
			} else if (discard) {
				return
			}

			if (commit.scope === '*') {
				commit.scope = ''
			}

			if (typeof commit.hash === 'string') {
				commit.hash = commit.hash.substring(0, 7)
			}

			if (typeof commit.subject === 'string') {
				let url = context.repository ? `${context.host}/${context.owner}/${context.repository}` : context.repoUrl
				if (url) {
					url = `${url}/issues/`
					// Issue URLs.
					commit.subject = commit.subject.replace(/#([0-9]+)/g, (_, issue) => {
						issues.push(issue)
						return `[#${issue}](${url}${issue})`
					})
				}
				if (context.host) {
					// User URLs.
					commit.subject = commit.subject.replace(/\B@([a-z0-9](?:-?[a-z0-9/]){0,38})/g, (_, username) => {
						if (username.includes('/')) {
							return `@${username}`
						}

						return `[@${username}](${context.host}/${username})`
					})
				}
			}
			// remove references that already appear in the subject
			commit.references = commit.references.filter((reference) => {
				if (!issues.includes(reference.issue)) {
					return true
				}

				return false
			})

			if (bugsUrl) {
				commit.references = commit.references.map((ref) => {
					return {
						...ref,
						bugsUrl,
					}
				})
			}
			const needChangelog = commit.header.includes('(changelog-needed)') && commit.header.includes(`(${process.env.PACKAGE}):`)
			// 可在此过滤所需要的commit信息
			if (needChangelog) {
				commit.header = commit.header.replace(/\(changelog-needed\)/g, '')
			}
			return needChangelog ? commit : null
		},
		groupBy: 'type',
		commitGroupsSort: 'title',
		commitsSort: ['scope', 'subject'],
		noteGroupsSort: 'title',
		notesSort: compareFunc,
		finalizeContext: (context) => {
			return Object.assign(context, {
				version: process.env.CURRENT_TAG,
				linkCompare: false,
			})
		},
	}
}

module.exports = {
	gitRawCommitsOpts: {
		from: process.env.PREVIOUS_TAG,
		to: process.env.CURRENT_TAG,
	},
	writerOpts: getWriterOpts(),
}

{
	"repository": {
		"type": "git",
		"url": "https://github.com/example.git"
	},
	"changelog": {
		"bugsUrl": "https://github.com/",
		"authorName": true,
		"authorEmail": false
	}
}
  • 配置 cz-lerna-changlog,支持选择packages
const czLernaChangelog = require('cz-lerna-changelog')

function makePrompter() {
	return function (cz, commit) {
		cz.prompt([
			{
				type: 'confirm',
				name: 'addChangeLog',
				message: 'Auto add `(changelog-needed)` to subject line?\n',
			},
		]).then((answer) => {
			let customQuestion = [
				{
					type: 'input',
					name: 'subject',
					message: 'Write a short, imperative tense description of the change:\n',
					filter: function (value) {
						const mark = (answer.addChangeLog && '(changelog-needed)') || ''
						return value.charAt(0).toLowerCase() + value.slice(1) + mark
					},
					validate: function (value) {
						return !!value
					},
				},
			]
			return czLernaChangelog.makePrompter(() => customQuestion)(cz, commit)
		})
	}
}

module.exports = {
	prompter: makePrompter(),
	makePrompter: makePrompter,
}

{
	"config": {
		"commitizen": {
			"path": "./scripts/changelog/cz-lerna-changelog.cjs"
		}
	},
	"workspaces": ["packages/*"]
}

引入Husky规范git提交

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

或者

{
	"scripts": {
		"prepare": "husky install"
	}
}
  • 执行install， 生成.husky文件夹
# 版本 8
npx husky install

#版本9
npx husky init
  • 添加一个 commit 钩子文件
# 版本8
npx husky add .husky/pre-commit
# 版本8 .husky/commit-msg 中添加npx --no -- commitlint --edit "$1"
npx --no -- commitlint --edit "$1"
# 版本9
echo 'npx --no -- commitlint --edit "$1"' > .husky/commit-msg
# .husky/pre-commit中写入以下命令，配合eslint使用
pnpm run lint-staged

配置eslint和prettier

eslint 配置
  • 安装依赖包
# eslint eslint依赖包
# eslint-config-standard JavaScript标准样式的ESLint可配置，基础配置,比较流行的有 airbnb、standard、prettier等
# eslint-plugin-import 支持ES6以上的导入/导出语法，并防止文件路径和导入名称拼写错误的问题
# eslint-plugin-node 为node准备的eslint规则配置
# eslint-plugin-promise es语法promise的eslint最佳配置
# eslint-plugin-vue vue项目的的配置，vue项目必须
# @typescript-eslint/parser 解析器
# @typescript-eslint/eslint-plugin  ts语法的配置
# eslint-define-config eslint-define-config可以帮助我们做语法提示
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文件
// .eslinttrc.cjs
// eslint-define-config可以帮助我们做语法提示
const { defineConfig } = require('eslint-define-config')

module.exports = defineConfig({
	// ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
	root: true,
	// 解析器
	parser: 'vue-eslint-parser',
	parserOptions: {
		// 解析器
		parser: '@typescript-eslint/parser',
		// js的版本
		ecmaVersion: 2020,
		// 模块化方案
		sourceType: 'module',
		ecmaFeatures: {
			jsx: true,
		},
	},
	// 启用的规则
	extends: ['plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'standard'],
	rules: {
		quotes: ['error', 'single'],
		'@typescript-eslint/ban-ts-ignore': 'off',
		'@typescript-eslint/explicit-function-return-type': 'off',
		'@typescript-eslint/no-explicit-any': 'off',
		'@typescript-eslint/no-var-requires': 'off',
		'@typescript-eslint/no-empty-function': 'off',
		'@typescript-eslint/no-use-before-define': 'off',
		'@typescript-eslint/ban-ts-comment': 'off',
		'@typescript-eslint/ban-types': 'off',
		'@typescript-eslint/no-non-null-assertion': 'off',
		'@typescript-eslint/explicit-module-boundary-types': 'off',
		'@typescript-eslint/no-unused-vars': [
			'error',
			{
				argsIgnorePattern: '^h$',
				varsIgnorePattern: '^h$',
			},
		],
		'no-use-before-define': 'off',
		'no-unused-vars': [
			'error',
			{
				argsIgnorePattern: '^h$',
				varsIgnorePattern: '^h$',
			},
		],
		'no-tabs': 'off',
		indent: 'off',
		'vue/custom-event-name-casing': 'off',
		'vue/html-indent': 'off',
		'vue/max-attributes-per-line': 'off',
		'vue/html-self-closing': 'off',
		'vue/singleline-html-element-content-newline': 'off',
		'vue/multi-word-component-names': 'off',
		'space-before-function-paren': 'off',
		'comma-dangle': 'off',
	},
})

.eslintignore
node_modules
.vscode
.idea
dist
.eslintrc.cjs
prettier 配置
  • 安装依赖
# eslint-config-prettier&eslint-plugin-prettier  用于解决eslint和prettier的冲突问题
pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D -w
  • 根目录创建.prettierrc文件
{
	"printWidth": 150,
	"tabWidth": 2,
	"useTabs": true,
	"semi": false,
	"singleQuote": true,
	"quoteProps": "as-needed",
	"jsxSingleQuote": false,
	"trailingComma": "es5",
	"bracketSpacing": true,
	"jsxBracketSameLine": false,
	"arrowParens": "always",
	"rangeStart": 0,
	"requirePragma": false,
	"insertPragma": false,
	"proseWrap": "preserve",
	"htmlWhitespaceSensitivity": "css",
	"vueIndentScriptAndStyle": false,
	"endOfLine": "auto"
}

  • 根目录创建.prettierignore文件用于忽略prewitter格式化

  • 安装 VSCode 插件 Prettier - Code formatter

    • 安装该插件以实现在保存的时候自动完成格式化

  • 在 .vscode/settings.json 中添加一下规则

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

配置lint-staged

  • 提交前在pre-commit中应该做一次lint 校验，在package.json添加
{
	"scripts": {
		"lint:script": "eslint --ext .js,.jsx,.vue,.ts,.tsx --fix --quiet ./"
	}
}

  • 在pre-commit 中添加命令 npm lint:script

  • 根据上面的配置是可以实现我们想要的效果的,但是我们会发现每次提交代码的时候 ESlint 或 Stylelint 都会检查所有文件,而我们需要的是只让它们检测新增的文件,因此我们可以使用lint-staged来解决这个问题

  • 安装lint-staged

pnpm add lint-staged -D -w
  • 在package.json中添加配置,更改pre-commit的命令 pnpm run lint-staged
{
	"lint-staged": {
		"src/**/*.{js,jsx,ts,tsx,vue}": ["eslint --ext .js,.jsx,.vue,.ts,.tsx --fix --quiet ./"]
	},
	"scripts": {
		"lint-staged": "lint-staged"
	}
}

创建项目

创建shared
  • shared项目用来服务其他多个web项目，提供公共方法、组件、样式等等
项目全局安装 vue
 # -w的意思是，workspace-root把依赖包安装到工作目录的根路径下，
 # 则根目录下会生成node_modules文件夹。可以共用，后续每个项目需要用到vue的
 # 都直接从根目录node_modules里取。
 pnpm add vue -w
在 packages 项目下创建 vue 项目
  • 执行创建命令，根据提示选择
 pnpm create vite
  • 删除 vue @vitejs/plugin-vue vite vue-tsc typescript 等依赖，安装到全局中
 # 子项目下执行
 pnpm remove vue
 pnpm remove @vitejs/plugin-vue vite vue-tsc typescript -D
 # 根目录下执行
 pnpm add @vitejs/plugin-vue vite vue-tsc typescript -D -w
  • 运行项目
 # 子项目下运行
 pnpm dev

配置全局指令

{
	"script": {
		"dev:project": "cd packages/vite-project & pnpm dev"
		// pnpm -C packages/vue-config-1 & pnpm dev 亦可
	}
}

引用 shared 内容

  • 加入 tsconfig.json 来配置路径
# 根目录下
pnpm add typescript -D -w
pnpm tsc --init
  • 配置
{
	"compilerOptions": {
		"outDir": "dist", // 输出的目录
		"sourceMap": true, //采用sourcemap
		"target": "es2016", // 目标语法
		"module": "esnext", // 模块格式
		"moduleResolution": "node", // 模块解析
		"strict": false, // 严格模式
		"resolveJsonModule": true, // 解析json模块
		"esModuleInterop": true, // 允许通过es6语法引入commonjs模块
		"jsx": "preserve", // jsx不转义
		"lib": ["esnext", "dom"], // 支持的类库esnext及dom
		"baseUrl": ".", // 当前是以该路径进行查找
		"paths": {
			"@monorepo/shared/components": ["packages/shared/components"],
			"@monorepo/shared/utils": ["packages/shared/utils"],
			"@monorepo/shared/fetch": ["packages/shared/fetch"],
			"@monorepo/shared/styles": ["packages/shared/styles"],
			// 或者用*号处理匹配
			"@monorepo/shared/*": ["packages/shared/*"]
		}
	}
}
建立关联
# 指定版本号
pnpm add @monorepo/shared@workspace --filter @monorepo/vite-project
打包插件
  • 安装 minimist esbuild
pnpm add minimist esbuild -D -w
  • 新增 打包脚本
// minimist 可以解析命令行参数，非常好用，功能简单
import minimist from 'minimist'
// 打包模块
import { build } from 'esbuild'
// node 中的内置模块
import path from 'path'
import fs from 'fs'
const __dirname = path.resolve()
const args = minimist(process.argv.slice(2))
const target = args._[0]
const format = args.f || 'global'
const entry = path.resolve(__dirname, `./packages/plugins/${target}/src/index.ts`)
/*  iife 立即执行函数(function(){})()
    cjs node中的模块 module.exports
    esm 浏览器中的esModule模块 import */
const outputFormat = format.startsWith('global') ? 'iife' : format === 'cjs' ? 'cjs' : 'esm'
const outfile = path.resolve(__dirname, `./packages/plugins/${target}/dist/${target}.${format}.js`)
const pkaPath = path.resolve(__dirname, `./packages/plugins/${target}/package.json`)
const pkaOps = JSON.parse(fs.readFileSync(pkaPath, 'utf8'))
const packageName = pkaOps.buildOptions?.name
build({
	entryPoints: [entry],
	outfile,
	bundle: true,
	sourcemap: true,
	format: outputFormat,
	globalName: packageName,
	platform: format === 'cjs' ? 'node' : 'browser',
}).then(() => {
	console.log('watching~~~')
})
  • 配置 plugins package.json
{
	"name": "@monorepo/common",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1"
	},
	// 打包会用到, 用于定义全局变量
	"buildOptions": {
		"name": "common"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"dependencies": {
		"@monorepo/shared": "workspace:^"
	}
}
  • 配置并执行打包命令
{
	"scripts": {
		"dev:common": "node scripts/dev-plugins.js common -f global"
	}
}

pnpm dev:common
  • 测试使用
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<script src="./common.global.js"></script>
		<script>
			const { testFunc } = common
			console.log(testFunc())
		</script>
	</body>
</html>

配置单命令启动多项目

{
	"scripts": {
		"serve": "node ./scripts/build/build.cjs",
		"build": "node ./scripts/build/build.cjs --production"
	}
}
  • build.cjs
const { spawn } = require('child_process')
const core = require('./core.cjs')
const path = require('path')

class BuildCore extends core {
	constructor(optionArray = []) {
		super()
		this.initOption(optionArray)
		this.start()
	}

	/**
	 * @description 执行构建流程
	 */
	start() {
		this.getPackages().then(async () => {
			this._argument = this._program.parse(process.argv).args
			try {
				const answer = await this.selectPackage()
				answer && this._argument.unshift(answer)
				this.initBuildSpawn()
			} catch (error) {
				console.error('the application must be selected!')
			}
		})
	}

	/**
	 * @description 初始化本地开发或者构建build过程
	 */
	initBuildSpawn() {
		if (!this.validatePackage()) return false
		const isProduction = this._program.parse(process.argv).production
		process.env.PACKAGE = this._argument[0]
		process.env.NODE_ENV = isProduction ? 'production' : 'development'
		const args = isProduction ? ['build'] : ['dev']
		const clinetPath = path.resolve(__dirname, `../../packages/${process.env.PACKAGE}/`)
		try {
			const clientSpawnInstance = spawn('pnpm', ['-C', clinetPath, args], {
				stdio: 'inherit',
				shell: true, // 兼容部分win10系统Error: spawn yarn ENOENT报错
			})
			this.registErrorHandle(clientSpawnInstance)
		} catch (error) {
			console.log(error)
		}
	}
}

new BuildCore([
	{
		short: '-p',
		long: '--production',
		description: 'build package in production mode',
	},
])
  • core.js
/**
 * 操作终端面板，选择项目启动
 * 思路：读取packages下的文件，获取每个项目的名称，存到项目数组中（this._packageArray） getPackages
 * 根据项目数组构建命令行选择器，选择对应的项目 selectPackage
 */

const process = require('process')
const fs = require('fs')
const path = require('path')
const { Command } = require('commander')
const { Select } = require('enquirer')

class Core {
	constructor() {
		// 项目数组
		this._packageArray = []

		// 命令实例
		this._program = new Command()
	}

	/**
	 * @description 选择应用
	 * @return Promise
	 */
	selectPackage() {
		// 深拷贝应用数组
		const packages = JSON.parse(JSON.stringify(this._packageArray))

		// 判断选择的包是否包含在应用数组中，包含则返回Promise成功状态
		if (this._argument && packages.includes(this._argument[0])) return Promise.resolve()

		// 终端命令行选择
		const prompt = new Select({
			name: 'apps',
			message: 'Please select the application to run',
			choices: packages,
		})

		return prompt.run()
	}

	/**
	 * @description 初始化自定义command参数
	 * @param {Object[]} optionArray 自定义参数数组
	 * @param {String} optionArray[].short 自定义参数缩写，如 -p
	 * @param {String} optionArray[].long 自定义参数全称， 如 --production
	 * @param {String} optionArray[].description 自定义参数作用的描述
	 */
	initOption(optionArray) {
		optionArray.forEach((obj) => {
			this._program.option(`${obj.short}, ${obj.long}`, obj.description)
		})
	}

	/**
	 * @description 检测自定义的package参数是否匹配packages目录下的项目
	 */
	validatePackage() {
		let pass = true
		if (!this._packageArray.includes(this._argument[0])) {
			console.error(`package param should be one of [${this._packageArray.join(',')}]`)
			console.log('eg: yarn <script> auth-overseas')
			pass = false
		}
		return pass
	}

	/**
	 * @description 获取packages目录下的项目
	 */
	getPackages() {
		return new Promise((resolve, reject) => {
			// 读取packages下的文件
			fs.readdir(path.join(__dirname, '../../packages'), { withFileTypes: true }, (err, dir) => {
				if (err) reject(err)
				// 将目录的文件名筛选读取，添加到应用数组中
				this._packageArray = dir
					.filter((i) => {
						const typeKey = Object.getOwnPropertySymbols(i)[0]
						return i.name !== 'plugins' && i.name !== 'shared' && i[typeKey] === 2
					})
					.map((j) => j.name)
				resolve()
			})
		})
	}

	/**
	 * @description 注册对子进程错误进行异常处理
	 * @param {Object} spawnInstance 子进程
	 * @param {Function} callback 子进程执行完成后回调
	 * @param {Function} errorCallback 子进程执行报错后回调
	 */
	registErrorHandle(spawnInstance, callback, errorCallback) {
		spawnInstance.on('error', (err) => {
			console.log(err)
			errorCallback && errorCallback(err)
			process.exit(1)
		})

		spawnInstance.on('exit', (code) => {
			callback && callback()
			// code = 0表示流程正常
			if (code !== 0) {
				process.exit(1)
			}
		})
	}
}

module.exports = Core
..undefined
关注
专栏目录
Monorepo与pnpm：前端项目管理的完美搭档
m0_68271787的博客
06-17 1703
pnpm又称 performant npm，翻译过来就是高性能的npm。Monorepo是一种项目开发与管理的策略模式，它代表"单一代码仓库"（Monolithic Repository）。在Monorepo模式中，所有相关的项目和组件都被存储在一个统一的代码仓库中，而不是分散在多个独立的代码仓库中，这些项目之间还可能会有依赖关系。
如何使用 pnpm 实现前端 Monorepo项目管理
乐闻世界
12-25 1947
随着软件开发项目变得越来越庞大和复杂，如何有效管理和维护代码库成为了一个重要的问题。一种流行的解决方案是 Monorepo，也就是在一个版本控制系统中管理所有的项目代码。Monorepo 是一种项目代码管理方式，指单个仓库中管理多个项目，有助于简化代码共享、版本控制、构建和部署等方面的复杂性，并提供更好的可重用性和协作性。React项目便是基于monrepo方式管理pnpm是一款快速、高效的 Javascript 包管理器。它的核心特点包括节省磁盘空间和更强的安全性。更重要的是，pnpm。
Monorepo 模板 —— 使用 PNPM 从零搭建 Monorepo，测试 web components 并发布
天下布武
06-12 1592
通过 PNPM 创建一个 monorepo（多个项目在一个代码仓库）项目，形成一个通用的仓库模板。这个仓库既可以用于公司存放和管理所有的项目，也可以用于将个人班余的所有积累整合其中。
用 pnpm 管理 Monorepo 项目
fk1012的博客
04-11 1249
快速的，节省磁盘空间的包管理工具。
使用pnpm workspace管理Monorepo架构
IT飞牛
08-19 5841
pnpm代表（高性能的npmn），同npm和yarn，都属于javascript包管理安装工具，它较npm和yarn在性能上得到很大提升，被称为快速地，节省磁盘空间的包管理工具。默认情况下，如果可用的 packages 与已声明的可用范围相匹配，pnpm 将从工作区链接这些 packages。例如, 如果bar引用并且foo@1.0.0存在工作区，那么pnpm会从工作区将foo@1.0.0链接到bar。但是，如果bar的依赖项中有，而foo@2.0.0。
从0开始搭建一个Monorepo模版，基于Turborepo+pnpm+changesets+dumi
BWater_monster的博客
08-09 2677
基于Turborepo+pnpm+changesets+dumi，搭建的多包组件库模版
pnpm + monorepo架构思想小试牛刀
红岸基地
06-16 1189
今天要写的是关于一种前端全新架构的方式，monorepo这是目前相对来讲比较新的一种前端架构，整好趁着最近在学，就利用这个平台记录一下学习的一个过程，上一篇文章更新的是react，后面也会一样更新，今天废话不多说了，我们开始今天的学习。
基于Pnpm+Changesets的Monorepo工具库实战
weixin_43719925的博客
03-14 826
Pnpm 代表（高性能的npm），同 npm 和 Yarn 一样，都属于Javascript包管理安装工具，它较 npm 和 Yarn 在性能上得到很大提升，被称为快速的，节省磁盘空间的包管理工具。Pnpm 还内置支持了 Workspace 功能，能帮助我们更轻松完成包之间的 link 和 build，更好管理Monorepo项目。更多详细了解，可以前往Npm官网 查看。Changesets 是一个用于 Monorepo 项目下版本以及 Changelog 文件管理的工具。
搭建vue3组件库(一): Monorepo架构搭建
weixin_43805439的博客
04-26 2982
Monorepo架构搭建
monorepo-example:为典型的Web应用程序设置monorepo项目结构的提示和技巧
05-13
Monorepo，即单个仓库（Monolithic Repository），是一种代码管理策略，将多个相关的项目或库放在同一个Git仓库中。这种做法在大型软件开发中变得越来越流行，因为它提供了更好的代码组织、更容易的依赖管理和版本...
pnpm创建react的ts脚手架项目
01-28
你可以按照以下步骤使用pnpm创建一个基于React和TypeScript的monorepo项目： 1. 首先，确保你已经安装了pnpm。你可以按照官方文档中的说明进行安装：[pnpm安装指南](https://pnpm.io/zh/installation)。 2. 创建一...
全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇五]
禅思院
03-20 118
这篇针对进行对编写组件进行单元测试是一个用于在 Node.js 环境中模拟浏览器环境的工具库，它可以让你在 Node.js 中运行一些浏览器特定的代码，比如 DOM 操作、事件处理等
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1141
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 91
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
前端基础面试题·第四篇——Vue（其二）
最新发布
2301_76380626的博客
10-08 652
路由跳转 接收参数 params传递参数可以用过页面路由对象route的params属性访问到。 2.query传参 query 传参是通过URL的查询字符串来传递参数，这种方式传递的参数是可选的。 这种方式不需要提前配置路由路径，直接在路由跳转时在路径或者配置中传递参数即可。 路由跳转 接收参数 这种方式传递的参数会挂载到页面路由对象route的query对象上。 2. hash和history路由区别 hash路由地址上在路径后面带#号，history路由地址上不带#号. 在
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1228
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
快餐食品检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
m0_73388125的博客
10-08 996
数据集信息展示在本研究中，我们使用了名为“burger detection”的数据集，以改进YOLOv8在快餐食品检测系统中的表现。该数据集专门针对快餐食品的多样性进行设计，涵盖了六个主要类别，分别是：bbq、bread、bun、hotdog、pattty和patty。这些类别的选择不仅反映了快餐食品的常见种类，还考虑到了它们在实际应用中的重要性，尤其是在餐饮行业的食品识别和分类任务中。数据集的构建过程经过精心设计，确保每个类别的样本数量和质量都能满足深度学习模型训练的需求。
昆虫分类与检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
qunshankeji的博客
10-08 926
数据集信息展示在昆虫分类与检测的研究领域，数据集的构建与应用至关重要。本项目采用的数据集名为“Bug Gan”，其设计旨在为改进YOLOv8模型提供丰富的训练素材，以实现更高效的昆虫识别与分类。该数据集包含29个不同的昆虫类别，涵盖了广泛的生物多样性，能够有效支持深度学习模型在复杂环境中的学习与推理。
monorepo pnpm react 如何
05-16
首先，让我们解释一下这些术语的含义： - Monorepo：将多个相关项目放在同一个代码库中的做法。 - PNPM：一种 Node.js 包管理器，类似于 npm 和 yarn。 - React：一个流行的 JavaScript 库，用于构建用户界面。 现在，我们来看一下如何在 Monorepo 中使用 PNPM 和 React： 1. 创建一个 Monorepo 项目，将所有相关项目放在同一个代码库中。 2. 在根目录下创建一个 `package.json` 文件，并添加以下内容： ``` { "private": true, "workspaces": [ "packages/*" ] } ``` 这个配置告诉 PNPM，这是一个 Monorepo 项目，并且它应该将所有 `packages/*` 目录下的包视为一个工作空间。 3. 在 `packages/` 目录下创建一个新的 React 应用程序。你可以使用 `create-react-app` 工具来快速创建一个新项目： ``` npx create-react-app my-app ``` 4. 确保在 `packages/my-app` 目录下有一个 `package.json` 文件，并添加以下内容： ``` { "name": "my-app", "version": "0.1.0", "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" }, "devDependencies": { "react-scripts": "^4.0.3" } } ``` 这个配置告诉 PNPM，这个包依赖于 React 和 React DOM 库，并且需要从 `react-scripts` 包中获取开发依赖项。 5. 在 `packages/my-app` 目录下运行以下命令，安装依赖项： ``` pnpm install ``` 6. 在 `packages/my-app` 目录下运行以下命令，启动 React 应用程序： ``` npm start ``` 这就是在 Monorepo 中使用 PNPM 和 React 的基本步骤。你可以使用相同的方法添加其他包和应用程序，并使用 PNPM 管理它们的依赖项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值