基于Vue3+TS的Monorepo前端项目架构设计与实现

写在前面

你好，我是前端程序员鼓励师岩家兴！去年在另一个项目https://juejin.cn/post/7121736546000044046中，我向读者朋友们介绍了结合npm包管理工具yarn作vue3项目的monorepo架构设计。今天，在这个风和日丽阳光明媚的钱塘江畔，我心情很好，我打算再写一篇她的姊妹篇------基于Vue3+TS的Monorepo前端项目架构设计与实现（pnpm版本）。

额，别看标题起的吓人且正经，像是在搞研究发论文一样，其实就那么点东西，炒冷饭，大体上就是把之前是yarn设计的monorepo架构项目，在新的项目里用pnpm做一次新的尝试改造，仅此而已，若有不对，供学习交流批评指正！

Vue3介绍

额，vue3是一个前端开发框架，生态系统完备，你可以把它理解成手动挡小轿车。它区别于Vue2的特性之一是，它是Composition API构造，在这之前Vue2使用的是Option API。还有一个好消息，之前Vue2使用的Object.defineProperty作数据绑定响应式，而Vue3使用了更为先进的Proxy做这件事，更为优雅了很多。Vue3中还有很多新的语法糖和写法、构建工具可以选择比较新的Vite、一些现成的开发框架去github上搜element ui、ant vue design、view ui之类的解决方案吧，一些钩子库比如说antfu大佬的@vueuse之类的。

这部分知识就介绍到这里，具体的你如果看得进去文档就去官网翻文档去github下源码看，你如果看不进去你就掘金上买点掘金大佬写的掘金小册吧，我看了下Vue2、Vue3好多都有的，买之前建议你看下评价读下章节再买，这个不支持七天无理由退款的。

Typescript介绍

Typescript是JavaScript的超集，介绍完毕！

这部分知识介绍到这里，如果你看得进去文档建议你去看MDN的Javascript、EcmaScript文档，以及微软公司的Typescript文档；看不进去推荐你去掘金上买掘金大佬写的掘金小册，其它友商的价格虚高，我觉得掘金小册的价格还行，嗯。

pnpm的workspace实操

第一步，先初始化一个项目

pnpm init

第二步，创建pnpm-workspace.yaml

这里分为两个方向，请结合第一张图看，第一部分是Web应用程序，它可能一个项目有很多个端和平台，所以放到applications目录，还有一个是公共的组件啊样式啊资源啊钩子函数啊工具包啊都放到packages下统一维护。

这里为了便于展示，我把node_modules暂时设置不展示，读者可以清楚看到层级分明的前端项目解决方案

第三步：各大配置文件

eslint作语法规约

module.exports = {

  env: {

    browser: true,

    es2021: true,

    node: true,

  },

  plugins: ['prettier'],

  extends: ['@antfu', 'plugin:prettier/recommended', 'eslint-config-prettier', 'prettier'],

  rules: {

    // 生产环境不允许打出log

    'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,

    // 关闭catch捕获的err要处理

    'n/handle-callback-err': 0,

    // 关闭未使用的ts变量声明

    '@typescript-eslint/no-unused-vars': 0,

    // 关闭vue不用有重复的key

    'vue/no-dupe-keys': 0,

    // 关闭没有声明emits

    'vue/require-explicit-emits': 0,

    // 关闭变量在上级作用域定义

    'vue/no-template-shadow': 0,

    'vue/valid-v-slot': 0,

  },

}

editorconfig抹平编辑器差异

[*.{js,jsx,ts,tsx,vue}]

# 缩进使用空格

indent_style = space

# 缩进2个字符

indent_size = 2

# 行结尾使用 lf !!!!

end_of_line = lf

# 删除行尾空格

trim_trailing_whitespace = true

# 文件结尾添加一个空行

insert_final_newline = true

# 行最大长度

max_line_length = 120

prettier作书写规范

module.exports = {

  printWidth: 120,

  tabWidth: 2,

  useTabs: false,

  semi: false,

  singleQuote: true,

  quoteProps: 'as-needed',

  bracketSpacing: true,

  jsxSingleQuote: true,

  arrowParens: 'always',

  endOfLine: 'lf',

  htmlWhitespaceSensitivity: 'ignore',

  overrides: [

    {

      files: '*.json',

      options: {

        printWidth: 200,

      },

    },

  ],

}

第四步：配置git提交钩子

执行楼下命令

pnpm install -wD commitizen cz-conventional-changelog

pnpm install -wD @commitlint/cli @commitlint/config-conventional husky

commitlint.config.js作提交规范约束、集合husky钩子触发。

module.exports = {

  extends: ['@commitlint/config-conventional'],

  // 自定义提交消息规则

  rules: {

    'body-leading-blank': [2, 'always'],

    'footer-leading-blank': [1, 'always'],

    'header-max-length': [2, 'always', 108],

    'subject-empty': [2, 'never'],

    'type-empty': [2, 'never'],

    'type-enum': [

      2,

      'always',

      // Git提交的信息，开头可引用以下这些类型

      [

        // 功能方面的提交

        'feat',

        // Bug方面的提交

        'fix',

        // 性能方面的提交

        'perf',

        // 针对代码样式的提交（不是CSS样式）

        'style',

        // 文档方面的提交

        'docs',

        // 数据方面的提交

        'data',

        // 测试方面的提交

        'test',

        // 重构方面的提交

        'refactor',

        // 编译打包方面的提交

        'build',

        // 持续集成方面的提交

        'ci',

        // 持续部署方面的提交

        'cd',

        // 数据库方面的提交

        'db',

        // 其他修改，比如构建流程，依赖管理

        'chore',

        // 回滚方面的提交

        'revert',

        // 工作流方面的提交

        'workflow',

        // 定义TS类型方面的提交

        'types',

        // 配置方面的提交

        'config',

        // 优化方面的提交

        'refine',

        // 清除废弃多余无用代码文件的提交

        'clean',

        // 整理代码及文件方面的提交

        'organize',

        // 依赖管理方面的提交

        'dependency',

        // 分支合并方面的提交

        'merge',

      ],

    ],

  },

}

需要把这些写到根目录的package.json文件

第五步：润润润！

人和项目有一个能跑就好，我试试把项目跑起来

成功！教程就介绍到这里，若有那部分不理解的，欢迎通过羽雀相关信息找到我！

pnpm workspace相关命令

额，为了便于读者理解，我这边直接代入一个具体的包做讲解，你在使用的时候只要注意下改成你自己的包就好。

pnpm install @ataola/zjt -w: 将zjt包安装到项目根目录
pnpm install @ataola/zjt -wD: 将zjt包安装到项目根目录的devDependencies
pnpm install axios --filter @ataola/run: 将axios包安装到ataola名下的润包，其中--filter可以简写-F
pnpm build --filter @ataola/run: 构建ataola名下的润包
pnpm build --filter "./applications/**" ：构建applications下所有的包
pnpm install @ataola/run -r --filter @ataola/project: 将ataola名下的润包安装包ataola名下的project包下

最后

感谢阅读，因为之前也写过类似的，所以一些细节请参见她的姊妹篇https://juejin.cn/post/7121736546000044046

简单地说下优点：高可复用！逻辑思路简洁明了，公共的抽离出来便于单独维护升级。

这里简单地讲下我的偷懒吧，我不高兴打那么长的字母，我给它阉割了一些字母，具体的如下：

这样子比如你要运行一个项目pnpm pl:dev就好了，少打了好多个字母可以摸鱼了，2333333333。