Monorepo pnpm 模式管理多个 web 项目

ops/2024/12/27 18:45:30/
Monorepo pnpm 模式管理多个 web 项目
    • Monorepo pnpm 模式管理多个 web 项目
      • 项目地址
      • git flow 工作流程
      • pnpm workspace
      • .npmrc
      • 初始化项目架构
      • 引入Husky规范git提交
      • 配置eslint和prettier
        • eslint 配置
        • prettier 配置
      • 配置lint-staged
      • 创建项目
        • 创建shared
        • 项目全局安装 vue
        • 在 packages 项目下创建 vue 项目
      • 配置全局指令
      • 引用 shared 内容
        • 建立关联
        • 打包插件
      • 配置单命令启动多项目

Monorepo pnpm 模式管理多个 web 项目

项目地址
  • Vue: Monorepo pnpm 模式管理多个 web 项目（Vue3)
  • Nuxt:Monorepo pnpm 模式管理多个 web 项目（Nuxt)
git flow 工作流程
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= ( g i t r e v − l i s t − − c o u n t . . o r i g i n / d e v e l o p ) R O O T D I R = (git rev-list --count ..origin/develop) ROOT_DIR= (gitrev−list−−count..origin/develop)ROOTD​IR=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 P A C K A G E V E R S I O N / v / − − n o − g i t − t a g − v e r s i o n > / d e v / n u l l T E M P C H A N G E L O G M E S S A G E = {PACKAGE_VERSION/v/} --no-git-tag-version > /dev/null TEMP_CHANGELOG_MESSAGE= PACKAGEV​ERSION/v/−−no−git−tag−version>/dev/nullTEMPC​HANGELOGM​ESSAGE=(echo “### KaTeX parse error: Expected 'EOF', got '#' at position 39: …g -1 --pretty="#̲### %ci";printf…{CHANGELOG_MESSAGE}”;printf "

    ";cat ./changelogs/mono.md)
    echo “$TEMP_CHANGELOG_MESSAGE” > ./changelogs/mono.md

    否则更新到changelogs目录对应package的package.md内

    else
    TEMP_CHANGELOG_MESSAGE=$(echo “### KaTeX parse error: Expected 'EOF', got '#' at position 39: …g -1 --pretty="#̲### %ci";printf…{CHANGELOG_MESSAGE}”;printf "

    “;cat ./changelogs/ P A C K A G E . m d ) e c h o " PACKAGE.md) echo " 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.repoUrlif (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 subjectcommit.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?
    ',
    },
    ]).then((answer) => {
    let customQuestion = [
    {
    type: ‘input’,
    name: ‘subject’,
    message: 'Write a short, imperative tense description of the change:
    ',
    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"}
}
配置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 ′ , v a r s I g n o r e P a t t e r n : ′ h ', varsIgnorePattern: '^h ′,varsIgnorePattern:′h’,
    },
    ],
    ‘no-use-before-define’: ‘off’,
    ‘no-unused-vars’: [
    ‘error’,
    {
    argsIgnorePattern: ‘^h ′ , v a r s I g n o r e P a t t e r n : ′ h ', varsIgnorePattern: '^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 项目
配置全局指令
{"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>

    Document
配置单命令启动多项目
{"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).argstry {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 falseconst isProduction = this._program.parse(process.argv).productionprocess.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 = trueif (!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


http://www.ppmy.cn/ops/145452.html

相关文章

PDF书籍《手写调用链监控APM系统-Java版》第12章 结束

PDF书籍《手写调用链监控APM系统-Java版》第12章 结束

本人阅读了 Skywalking 的大部分核心代码&#xff0c;也了解了相关的文献&#xff0c;对此深有感悟&#xff0c;特此借助巨人的思想自己手动用JAVA语言实现了一个 “调用链监控APM” 系统。本书采用边讲解实现原理边编写代码的方式&#xff0c;看本书时一定要跟着敲代码。 作者…
阅读更多...
【RabbitMQ】【Laravel】【PHP】Laravel 中使用 RabbitMQ

【RabbitMQ】【Laravel】【PHP】Laravel 中使用 RabbitMQ

在 Laravel 中使用 RabbitMQ，通常需要安装 RabbitMQ 客户端库，并在 Laravel 项目中进行适当配置。php-amqplib 是常用的 PHP RabbitMQ 客户端库，Laravel 也有一些扩展包，方便集成 RabbitMQ。下面是如何在 Laravel 中使用 RabbitMQ 的详细步骤： 1. 安装所需的扩展包 在 L…
阅读更多...
命名空间与模块化概述

命名空间与模块化概述

本文我们要聊一聊 命名空间 和 模块化&#xff0c;这两个在 TypeScript 中非常重要的概念。无论你是正在开发大型应用还是维护已有的项目&#xff0c;这两个概念都会对你的代码组织和管理起到非常重要的作用。 什么是命名空间&#xff1f; 首先&#xff0c;咱们从 命名空间 开…
阅读更多...
电脑出现 0x0000007f 蓝屏问题怎么办，参考以下方法尝试解决

电脑出现 0x0000007f 蓝屏问题怎么办，参考以下方法尝试解决

电脑蓝屏是让许多用户头疼的问题&#xff0c;其中出现 “0x0000007f” 错误代码更是较为常见且棘手。了解其背后成因并掌握修复方法&#xff0c;能帮我们快速恢复电脑正常运行。 一、可能的硬件原因 内存问题 内存条长时间使用可能出现物理损坏&#xff0c;如金手指氧化、芯片…
阅读更多...
Delphi WebBrowser 基本操作与常见问题的解决方案

Delphi WebBrowser 基本操作与常见问题的解决方案

前言 WebBrowser 作为Delphi 常见的网络浏览控件&#xff0c;我这里整理了一些它的基本操作&#xff0c;遇到了一些问题&#xff0c;我梳理了一下并给出解决方案 基本操作 WebBrowser1.GoHome; //到浏览器默认主页 WebBrowser1.Refresh; //刷新 WebBrowser1.GoBack; //后退 Web…
阅读更多...
OCR(二) TesseractOCR 语言包训练

OCR(二) TesseractOCR 语言包训练

目录 1. 语言包简介 2. 环境部署 2.1 安装tessract 2.2 安装java JDK 2.3 下载jTessBoxEditor 3. 训练（LSTM模式-推荐） 3.1 示例 3.2 制作tiff图片 3.3 生成box文件 3.4 调整训练文件 3.5 生成 lstmf 文件 3.6 提取LSTM文件 3.7 创建txt文件 3.8 合并 3.9 验证…
阅读更多...
LabVIEW应用在工业车间

LabVIEW应用在工业车间

LabVIEW作为一种图形化编程语言&#xff0c;以其强大的数据采集和硬件集成功能广泛应用于工业自动化领域。在工业车间中&#xff0c;LabVIEW不仅能够实现快速开发&#xff0c;还能通过灵活的硬件接口和直观的用户界面提升生产效率和设备管理水平。尽管其高成本和初期学习门槛可…
阅读更多...
解决 Docker 中 DataLoader 多进程错误：共享内存不足

解决 Docker 中 DataLoader 多进程错误：共享内存不足

一、问题描述&#xff1a; 在容器化环境&#xff08;如 Docker&#xff09;中使用深度学习框架进行训练时&#xff0c;通常会使用 PyTorch 的 DataLoader 来加载数据。在使用 DataLoader 的多进程数据加载时&#xff0c;当 num_workers > 0&#xff0c;即启用多个工作进程并…
阅读更多...
最新文章

Copyright @ 2022~2023