【Nova UI】二、解锁 Vue 组件库环境搭建秘籍：pnpm、TS 与 Monorepo 的协同

本文链接：https://blog.youkuaiyun.com/qq_40230003/article/details/146798578

序言

回顾上文，我们已全方位洞悉搭建 Vue 组件库所需的技术选型，也透彻明晰后续搭建步骤的整体规划。从环境搭建🏗️起步，历经组件设计开发、文档编写、集成测试，直至持续优化迭代，每一步都犹如精心铺设的基石，为打造实用且强大的组件库构筑坚实道路。此刻，我们即将正式踏入实战的首站 —— 环境搭建，这一环节恰似开启组件库搭建大门的关键钥匙🔑，让我们一同深入探索，解锁其中蕴藏的奥秘。

搭建Monorepo环境

在包管理器的选择上，我选用了 pnpm。它作为一款卓越的软件包管理器，与 npm 和 yarn 同属前端生态系统中的重要成员。pnpm 在处理依赖安装、更新和删除等操作时，运用独特的技术手段，极大地优化了多个项目间的依赖共享机制，不仅显著提升了依赖管理的效率，还能大幅减少磁盘空间的占用，堪称高效与便捷的完美结合👏。

Pnpm

# 首先，通过npm全局安装pnpm
npm install pnpm -g
# 进入项目文件夹，初始化package.json配置文件
pnpm init
# 在项目全局范围内，添加vue和ts开发依赖
pnpm install vue typescript -D

安装完成后，pnpm 默认会将模块存放在node_modules/.pnpm路径下。然而，在实际开发过程中，为了便于直接使用这些模块，我们需要将其进行提升操作。具体做法是在项目目录下创建.npmrc文件，并在其中配置shamefully-hoist = true，完成配置后，再次执行pnpm install重新安装依赖，即可实现模块的提升。

Typescript

接下来，我们需要初始化一个 TypeScript 配置文件，这一操作至关重要。它能够对我们编写的代码进行严格校验，为开发过程提供丰富的代码提示📝，同时依据特定规则精准解析 TypeScript 语法，从而给出更为友好且实用的提示信息，助力开发效率与代码质量的双重提升🚀。

# 初始化 Typescript
pnpm tsc --init

以下是详细的配置内容及对应注释：

{
    "compilerOptions": {
        "module": "ESNext", // 指定打包模块类型为ESNext，紧跟现代JavaScript模块化规范
        "declaration": false, // 默认为不生成声明文件，减少不必要的文件输出
        "noImplicitAny": true, // 严禁未声明类型的变量，增强代码的类型安全性
        "removeComments": true, // 编译时自动删除注释，精简代码体积
        "moduleResolution": "node", // 按照Node.js的模块解析规则进行模块查找
        "esModuleInterop": true, // 支持ES6模块与CommonJS模块的互操作性
        "jsx": "preserve", // 保留JSX语法，方便在Vue组件中使用JSX进行视图编写
        "noLib": false, // 正常处理类库，确保项目依赖的各类库文件能被正确解析
        "target": "ES6", // 以ES6标准为目标编译代码，保证代码在主流环境中的兼容性
        "sourceMap": true, // 生成source - map文件，方便调试时定位原始代码位置
        "lib": [
            "ESNext",
            "DOM"
        ], // 指定编译时使用的库，涵盖最新的JavaScript特性与DOM相关功能
        "allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块中进行默认导入
        "experimentalDecorators": true, // 启用装饰器特性，为代码编写提供更优雅的方式
        "forceConsistentCasingInFileNames": true, // 强制文件名大小写一致，避免因大小写问题导致的模块加载错误
        "resolveJsonModule": true, // 支持解析JSON模块，方便引入和使用JSON数据
        "strict": true, // 启用严格模式，全面提升代码的严谨性和可靠性
        "skipLibCheck": true // 跳过类库检测，加快编译速度
    },
    "exclude": [
        "node_modules",
        "**/__tests__",
        "dist/**"
    ] // 明确排除不需要编译的文件和目录，提高编译效率
}

配置Monorepo工作空间

在项目根目录下，新建一个pnpm - workspace.yaml文件。前文已提及，Monorepo 作为一种先进的多项目管理策略，该文件在此发挥着核心作用，它能够精准清晰地定义工作区的范围与规则⚖️，为项目的整体架构和管理提供坚实的基础。

以下是相关配置及注释：

packages: 
    - 'packages/**' # 此路径涵盖所有组件包，确保组件开发相关内容均在工作区内
    - play # 专门用于存放组件测试的相关代码，便于集中管理和维护测试逻辑
    - docs # 存放组件文档，方便开发人员和使用者查阅组件的详细信息和使用方法

创建组件包

在项目根目录下，新增packages文件夹，该文件夹将作为我们所有组件的存放地。为了实现组件的模块化管理，我们进一步在其内部创建了以下子目录：

components：用于存放 Vue 组件，是组件库的核心内容之一。
hooks：集中管理通用钩子函数，方便在不同组件中复用逻辑。
svgs：专门存放 SVG 组件，便于对矢量图形相关组件进行统一管理。
theme - chalk：用于存储主题样式，确保组件库在外观呈现上的一致性和可定制性。
types：存放 TypeScript 类型定义文件，增强代码的类型安全性和可维护性。
utils：收纳各类工具函数，为组件开发和使用提供便利。

在完成packages下的目录创建后，需要对每个子目录进行初始化。在命令行中切换到相应目录，执行pnpm init命令。初始化完成后，需将每个子目录中的package.json文件中的name字段替换为当前包的名称。以components包为例（其他包操作同理）：

{
  "name": "@nova-ui/components",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

包创建完成后，为了实现各包之间的相互调用，需要将这些包统一放置在node_modules目录下。在命令行中切换到项目根目录，执行pnpm install @nova-ui/components -w命令，即可完成操作。

搭建测试环境

当组件编写完成后，为了确保其功能的正确性和稳定性，我们需要搭建一个测试环境，以便对组件进行使用和测试。在此，我们选择搭建一个基于 Vue 3 + TypeScript 的测试环境。

在命令行中切换到相应目录，执行pnpm create vite play --template vue - ts命令。命令执行完成后，可以根据实际需求删除一些非必要文件，以精简项目结构。

搭建完成后，在play/src文件夹下会生成一个env.d.ts文件，该文件是专门为.vue文件编写的声明文件。考虑到该声明文件在我们的组件开发中同样需要使用，为了实现复用，我们将其提取到项目根目录下的typings/vue - shim.d.ts路径下。

运行

至此，环境搭建工作已基本完成。对于测试环境的运行，常规操作是在所在目录下执行npm run dev命令。然而，为了提高操作的便捷性，避免每次都要切换到特定目录执行命令，我们可以将运行命令配置到项目根目录的package.json文件中。具体做法是在scripts字段中添加"dev": "pnpm -C play run dev"，配置完成后，只需在项目根目录下执行npm run dev，即可轻松启动我们的测试环境🎉。

🦀🦀感谢看官看到这里，如果觉得文章不错的话🙌，点个关注不迷路⭐。
诚邀您加入我的微信技术交流群🎉，群里都是志同道合的开发者👨‍💻，大家能一起交流分享摸鱼🐟。期待与您在群里相见🚀，咱们携手在开发路上共同进步✨ ！
👉点我

感谢各位大侠一路相伴，实在感激！不瞒您说，在下还有几个开源项目 📦，它们就像精心培育的幼苗 🌱，急需您的浇灌。要是您瞧着还不错，麻烦动动手指，给它们点亮几颗 Star ⭐，您的支持就是它们成长的最大动力，在此谢过各位大侠啦！

Nova UI组件库：https://github.com/gmingchen/nova-ui
基于 Vue3 + Element-plus 管理后台基础功能框架
预览：https://admin.gumingchen.icu
Github：https://github.com/gmingchen/agile-admin
Gitee：https://gitee.com/shychen/agile-admin
基础版后端：https://github.com/gmingchen/java-spring-boot-admin
文档：http://admin.gumingchen.icu/doc/

基于 Vue3 + Element-plus + websocket 即时聊天系统
预览：https://chatterbox.gumingchen.icu/
Github：https://github.com/gmingchen/chatterbox
Gitee：https://gitee.com/shychen/chatterbox

基于 node 开发的后端服务：https://github.com/gmingchen/node-server