正文

好了 ，本節(jié)內(nèi)容正式進(jìn)入開發(fā)環(huán)節(jié)，我們按步驟一邊開發(fā)，一邊對(duì)比element-plus: ?? Vue 3 的桌面端組件庫進(jìn)行開發(fā)，了解其從零開始的開發(fā)過程，在此之前我們需要統(tǒng)一Node版本，統(tǒng)一包管理器：

基礎(chǔ)環(huán)境統(tǒng)一

• Node版本： 14+
• Pnpm版本: 7.13.5 7+
• 編輯器： vscode

pnpm下載

npm install pnpm -g

基礎(chǔ)Monmrepo環(huán)境建設(shè)

在Element-plus開發(fā)初期，也是采用lerna+yarn的形式進(jìn)行的Monmrepo架構(gòu)的形式開發(fā)的，最后也是變更到了pnpm，可見pnpm去做這種架構(gòu)是尤為方便的，好了廢話不多說，我們直接進(jìn)入開發(fā)

包名選擇與注冊(cè)

在開發(fā)這個(gè)組件庫之前，我們需要為我們的組件庫進(jìn)行一個(gè)命名，這里大家自己定義就好，但是因?yàn)槲覀冏罱K會(huì)發(fā)布到npmjs倉庫,所以我們需要確定這個(gè)包并沒有被別人已經(jīng)注冊(cè)，你可以前往官網(wǎng)進(jìn)行搜索查看有沒有被安裝，也可以使用npm命令進(jìn)行查看：

npm view package-name version

如果返回了版本號(hào)表示已經(jīng)被注冊(cè)了，如果沒有則是會(huì)返回404，你就可以進(jìn)行使用了，但是有部分的名字沒被使用也會(huì)被告知與已存在的包名相似，這種也無法被使用。

還有一種特殊情況，如果你很喜歡這個(gè)包名，而又被使用了，例如一些官方的包都是如此，需要的包名可能被占用，那么你可以添加命名空間，比如cool-ui被占用，你可可以添加一個(gè)命名空間這樣@yourname/cool-ui進(jìn)行使用即可。

當(dāng)然了，還有一種極端方式，如果一些人只是為了單純占用包名，處于長(zhǎng)期不更新的狀態(tài)，那么你就可以向npm官方申訴使用xx包名，這一類包會(huì)被認(rèn)為對(duì)社區(qū)沒有價(jià)值的包，一般半個(gè)月內(nèi)可以申訴到。

本次我們這里使用的包名為brain-ui，暫時(shí)沒有特殊意義......

基礎(chǔ)目錄架構(gòu)

首先創(chuàng)建我們的文件夾brain-ui,和npm創(chuàng)建一樣，使用pnpm init即可，當(dāng)我們創(chuàng)建完成之后，會(huì)得到這樣的一個(gè)package.json:

但是作為我們的根目錄，這個(gè)項(xiàng)目并不需要發(fā)布，我們對(duì)他進(jìn)行簡(jiǎn)單的改造，將其設(shè)置為私有，我們不需要版本，不需要關(guān)鍵字、入口文件等等，改為如下基礎(chǔ)配置即可：

{
  "name": "brain-ui",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "SNine <J_longyan@163.com>",
  "license": "MIT"
}

同時(shí)協(xié)議也改為MIT當(dāng)然這個(gè)協(xié)議很多種，然后我們需要對(duì)pnpm進(jìn)行一些簡(jiǎn)單的配置，具體的配置文檔可以看看中文文檔,最基礎(chǔ)的我們需要在根目錄下創(chuàng)建一個(gè)配置.npmrc文件，參考此處可以看到，在配置中添加一個(gè)：

shamefully-hoist = true

默認(rèn)情況下，pnpm 創(chuàng)建一個(gè)半嚴(yán)格的 node_modules，這意味著依賴項(xiàng)可以訪問未聲明的依賴項(xiàng)，但 node_modules 之外的模塊不行。 通過這種布局，生態(tài)系統(tǒng)中的大多數(shù)的包都可以正常工作。 但是，如果某些工具僅在提升的依賴項(xiàng)位于根目錄的 node_modules 時(shí)才有效，您可以將其設(shè)置為 true 來為您提升它們。

這一步是我們必須要做的，可以參考看看Elment-plus，他設(shè)置三項(xiàng)，其他兩項(xiàng)是非必須的，或是在我們需要的時(shí)候 再加以說明和添加，我們暫時(shí)可以只添加這一項(xiàng)即可，

首先我們先下載最基礎(chǔ)需要用到的vue3和typescript：

 pnpm install vue@next typescript -D

這一個(gè)是我們的本地開發(fā)依賴，只需要下載到本地依賴，即可，

下載完typescript后，我們就在根目錄執(zhí)行:

npx tsc --init

這樣就可以生成一份ts的基礎(chǔ)配置文件,我們需要對(duì)其調(diào)整為我們需要的配置，這里的配置很多，可以參考文檔或者直接查看Element-plus項(xiàng)目的配置，我們的配置貼在這里：

{
  "compilerOptions": {
    "module": "ESNext",
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "target": "es6",
    "sourceMap": true,
    "lib": [
      "ESNext",
      "DOM"
    ],
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "strict": true,
    "skipLibCheck": true,
  },
  "exclude": [
    "node_modules",
    "**/__tests__",
    "dist/**"
  ]
}

然后我們開始創(chuàng)建子項(xiàng)目了，在pnpm當(dāng)中，我們要?jiǎng)?chuàng)建Monmrepo結(jié)構(gòu)需要依賴于一個(gè)配置文件pnpm-workspace.yaml，我們?cè)诟夸浵聞?chuàng)建它：具體配置信息可以參考這里的文檔,在配置文件中我們需要什么，哪些下面的項(xiàng)目為我們的子目錄（yaml文件類似與json文件，都是為了表示具體的鍵值對(duì)形式的配置），

在申明前，我們需要考慮，我們需要哪些子項(xiàng)目，正常來講我們必要的包含組件庫項(xiàng)目、開發(fā)時(shí)預(yù)覽項(xiàng)目用于調(diào)試、開發(fā)文檔項(xiàng)目（用于最終上線的文檔） 、公共方法項(xiàng)目（用于抽離公共邏輯） ,這些我們前期需要用到的項(xiàng)目，參考 Elemtn-plus 可以發(fā)現(xiàn)，他抽離了更多的項(xiàng)目，在根目錄得package.json文件當(dāng)中以@Element-plus/開頭得都是一個(gè)單獨(dú)的項(xiàng)目，我們初期先不需要這么多，我們，先創(chuàng)建兩個(gè)項(xiàng)目，一個(gè)example用于調(diào)試預(yù)覽（對(duì)比Elment-plus的是paly） ，另一個(gè)就是相對(duì)核心的packages文件夾了，基本大部分的開源項(xiàng)目的組件庫代碼都是放在其中，然后我們又可以在packages下面去創(chuàng)建更多的項(xiàng)目，比如components放置組件、theme-chalk放置樣式文件、contants放置場(chǎng)景、utils放置公共文件，更多文件我們使用再具體來說，此時(shí)我們來定義pnpm-workspace.yaml文件：

packages:
  - 'packages/**'
  - example

我們對(duì)example和packages下面的所有文件進(jìn)行申明，然后進(jìn)入到package目錄下去創(chuàng)建我們剛剛說到的文件，創(chuàng)建完成后，此時(shí)的目錄是：

brain-ui
├── .vscode
│   └── settings.json  
├── example
├── packages
│   ├── components     
│   ├── theme-chalk    
│   └── utils
├── package.json       
├── pnpm-lock.yaml     
└── pnpm-workspace.yaml

添加完這些文件夾后，我們依次進(jìn)入，packages/components、packages/theme-chalk、packages/utils里執(zhí)行pnpm init進(jìn)行項(xiàng)目初始化，拿utils舉例，我們生成的文件需要做一定的調(diào)整，調(diào)整為如下：

{
  "name": "@brain-ui/utils",
  "version": "0.0.1",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

沒有過多特殊點(diǎn)，我們?cè)谀敲辞懊嫣砑恿艘粚用臻g，這樣表示當(dāng)前的utils項(xiàng)目是我們@brain-ui的子項(xiàng)目，其他兩個(gè)目錄同理，此時(shí)我們就完成了packages下的基礎(chǔ)文件結(jié)構(gòu)，然后，我么對(duì)example示例開發(fā)調(diào)試文檔進(jìn)行開發(fā)：

本地開發(fā)調(diào)試預(yù)覽項(xiàng)目開發(fā)

同樣我們cd到example項(xiàng)目當(dāng)中進(jìn)行，pnpm init初始化操作，同理并修改掉其name名稱，為其添加命名空間，此時(shí)，我們就要進(jìn)行代碼編寫了：

本地的開發(fā)構(gòu)建我們已經(jīng)提前說明了，使用Vite進(jìn)行開發(fā)，所以我們安裝Vite已經(jīng)Vue的插件，具體的配置 Vite | Vite 官方中文文檔可以在此處查看，插件 | Vite 官方中文文檔在這里查看，配置十分簡(jiǎn)單，和大多數(shù)配置文件類似，默認(rèn)的配置需要我們?cè)诟夸泟?chuàng)建vite.config.ts,也可以自己通過在package.jsn中通過--config指定地址，那么配置文件就直接貼這里了：

當(dāng)然別忘了先安裝我們需要的依賴包，只需要兩個(gè)包即可，Vite以及其Vue的插件，上述的文檔地址也有其詳細(xì)說明：

pnpm install vite @vitejs/plugin-vue -D

同樣下載為開發(fā)依賴即可，此時(shí)，我們就可以執(zhí)行vite啟動(dòng)命令了,此次這里的版本對(duì)應(yīng)的是

• vite: 3.1.8
• @vitejs/plugin-vue: 3.1.2

不同版本之間可能會(huì)有些許差異，自己編碼過程中請(qǐng)注意

npx vite

很明顯，我們這樣啟動(dòng)太麻煩，我們需要將命令配置到package.json中的scripts當(dāng)中去，

"scripts": {
    "dev": "vite"
  },

配置完成后之后只需要pnpm run dev啟動(dòng)即可，但是此時(shí)我們還不能啟動(dòng)，因?yàn)槲覀冞€缺少html文件，所以我們?cè)谀夸浵聞?chuàng)建index.html，其也是默認(rèn)名稱，如需更該也要同步配置，同時(shí)我們需要引入一個(gè)入口文件main.ts,代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="/main.ts" type="module"></script>
</body>
</html>

不要忘記，script的type為module，因?yàn)槲覀兦懊嬉呀?jīng)提到了vite是基于es6 module的，然后再放置一個(gè)id為app的dom節(jié)點(diǎn)即可，那么我們?cè)賱?chuàng)建一個(gè)main.ts和一個(gè)app.vue用于一個(gè)基礎(chǔ)vue項(xiàng)目的搭建：

/* main.ts */
import { createApp } from 'vue'
import App from './app.vue'
const app = createApp(App)
app.mount('#app')

/* app.vue */
<template>
  <h1>我是開發(fā)調(diào)試頁面</h1>
</template>

這樣就是一個(gè)最基礎(chǔ)的vue項(xiàng)目入口文件了，但是因?yàn)槭?strong>typescript項(xiàng)目，所以會(huì)出現(xiàn)這個(gè)錯(cuò)誤：

這里提示沒有申明，所以我們需要對(duì)這個(gè)文件申明一個(gè)模塊，告訴ts其是申明類型的，所以我們可以在項(xiàng)目根目錄下創(chuàng)建一個(gè)文件typings，然后在其中加入vue的申明文件vue-shim.d.ts,里面的配置內(nèi)容，官方文檔都可以看到，我們直接粘貼過來：

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

• 這個(gè)名字是非必須的，只需要是d.ts結(jié)尾的我文件即可，名稱不重要

此時(shí)我們發(fā)現(xiàn)這個(gè)報(bào)錯(cuò)已經(jīng)消失了。

此時(shí)我們執(zhí)行

pnpm run dev

就可以快速啟動(dòng)vite了，此時(shí)我們可以看到：

打開之后就看到了我們?cè)?strong>app.vue中編寫的內(nèi)容了，這里的Vite版本2與3之間存在一些更新，如果使用的是Vite3.x此處運(yùn)行就會(huì)報(bào)一個(gè)path的錯(cuò)誤，這就是因?yàn)榘姹靖碌脑?，如果遇到這個(gè)問題，請(qǐng)將你的Node版本升級(jí)到16即可解決這個(gè)問題，好了，如果成功，打開頁面，我們已經(jīng)可以成功訪問到app.vue頁面了：

此時(shí)我們的預(yù)覽調(diào)試項(xiàng)目已經(jīng)ok了，后續(xù)開發(fā)的組件只需要引入到這個(gè)項(xiàng)目當(dāng)中，我們就可以邊開發(fā)邊調(diào)試項(xiàng)目了。

但是當(dāng)前我們執(zhí)行命令是在brain-ui/example目錄下，并不是根文件夾，所以我們需要把這個(gè)命令放在，根目錄當(dāng)中，所以我們需要在根目錄下的package.json中添加一條新命令:

"scripts": {
    "dev": "pnpm -C example dev"
  },

此時(shí)我們?cè)诟夸泩?zhí)行pnpm run dev即可實(shí)現(xiàn)相同的效果，唯一 需要知道的是 -C后面的參數(shù)表示命名空間，表示在example命名空間下執(zhí)行dev命令。

此時(shí)我們的開發(fā)調(diào)試環(huán)境已經(jīng)實(shí)現(xiàn)了。

子項(xiàng)目之間的互相引用

剛剛我們已經(jīng)對(duì)packages下面的三個(gè)項(xiàng)目進(jìn)行了簡(jiǎn)單的初始化，此時(shí)我們對(duì)其進(jìn)行一些補(bǔ)充，我們?cè)诓煌?xiàng)目里都進(jìn)行了pnpm init，所以我們知道他們都可以理解為單獨(dú)的項(xiàng)目，所以在開發(fā)過程中是需要互相引用的，為了實(shí)現(xiàn)其相互引用，我們將其安裝到根目錄當(dāng)中去，正常情況我們這樣就可以安裝一個(gè)包了

pnpm install @brain-ui/components

但是此時(shí)我們發(fā)現(xiàn)會(huì)報(bào)錯(cuò)：

并沒有安裝成功，但是也很好理解，翻譯一下，如果你想安裝包到根目錄下，你安裝的時(shí)候就必須在參數(shù)后面添加-w表示同意安裝到根目錄，所以我們添加上安裝

pnpm install @brain-ui/components @brain-ui/theme-chalk @brain-ui/utils -w

我們可以看到已經(jīng)安裝成功，可能有些同學(xué)會(huì)好奇，這樣是如何下載的，日常我們安裝的包都是從npmjs倉庫遠(yuǎn)程下載的，我們這里下載的其實(shí)是本地的包，實(shí)際就是創(chuàng)建了一個(gè)軟鏈接，自己開發(fā)過小組件的同學(xué)一定對(duì)npm link不陌生，這里是同理，但是不同的是npm link是將別處寫的模塊引入到的項(xiàng)目當(dāng)中來，而我們當(dāng)前是將自己的模塊創(chuàng)建一個(gè)軟鏈安裝在根目錄下，更加方便，此時(shí)我們打開node_modules可以看到，后面有個(gè)小箭頭，這個(gè)就表示本地創(chuàng)建的軟鏈接。

此時(shí)我們就下載完成，成功創(chuàng)建了軟鏈接，因?yàn)槲覀兪窃诟夸浵孪螺d的，所以我們子項(xiàng)目當(dāng)中都可以使用這些包，此時(shí)我們就感覺到了Monmrepo架構(gòu)的便利性了，這些包可以在開發(fā)過程中完成相互引用了。

好了，本節(jié)內(nèi)容我們已經(jīng)完成了組件基礎(chǔ)目錄的搭建，Monmrepo的實(shí)現(xiàn)，ts配置、開發(fā)調(diào)試環(huán)境的搭建、子模塊子包的相互引用問題等一系列基礎(chǔ)架構(gòu)的實(shí)現(xiàn)與講解，為之后的組件開發(fā)提供基礎(chǔ)保障，每個(gè)模塊單一來看都很簡(jiǎn)單，有經(jīng)驗(yàn)的同學(xué)可能會(huì)覺得過于繁瑣，但是想帶來的效果是能做到每一步講的能足夠簡(jiǎn)易，以便于方便理解。

目前的內(nèi)容依舊只是基礎(chǔ)部分，我們的對(duì)比Element-plus的整體結(jié)構(gòu)逐步完善。

以上就是組件庫Monmrepo架構(gòu)與開發(fā)調(diào)試環(huán)境構(gòu)建詳解的詳細(xì)內(nèi)容，更多關(guān)于Monmrepo開發(fā)調(diào)試環(huán)境構(gòu)建的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論