正文

好了 ，本節(jié)內(nèi)容正式進入開發(fā)環(huán)節(jié)，我們按步驟一邊開發(fā)，一邊對比element-plus: ?? Vue 3 的桌面端組件庫進行開發(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的形式進行的Monmrepo架構(gòu)的形式開發(fā)的，最后也是變更到了pnpm，可見pnpm去做這種架構(gòu)是尤為方便的，好了廢話不多說，我們直接進入開發(fā)

包名選擇與注冊

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

npm view package-name version

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

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

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

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

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

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

但是作為我們的根目錄，這個項目并不需要發(fā)布，我們對他進行簡單的改造，將其設(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"
}

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

shamefully-hoist = true

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

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

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

 pnpm install vue@next typescript -D

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

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

npx tsc --init

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

{
  "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)建子項目了，在pnpm當中，我們要創(chuàng)建Monmrepo結(jié)構(gòu)需要依賴于一個配置文件pnpm-workspace.yaml，我們在根目錄下創(chuàng)建它：具體配置信息可以參考這里的文檔,在配置文件中我們需要什么，哪些下面的項目為我們的子目錄（yaml文件類似與json文件，都是為了表示具體的鍵值對形式的配置），

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

packages:
  - 'packages/**'
  - example

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

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

添加完這些文件夾后，我們依次進入，packages/components、packages/theme-chalk、packages/utils里執(zhí)行pnpm init進行項目初始化，拿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"
}

沒有過多特殊點，我們在那么前面添加了一層命名空間，這樣表示當前的utils項目是我們@brain-ui的子項目，其他兩個目錄同理，此時我們就完成了packages下的基礎(chǔ)文件結(jié)構(gòu)，然后，我么對example示例開發(fā)調(diào)試文檔進行開發(fā)：

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

同樣我們cd到example項目當中進行，pnpm init初始化操作，同理并修改掉其name名稱，為其添加命名空間，此時，我們就要進行代碼編寫了：

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

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

pnpm install vite @vitejs/plugin-vue -D

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

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

不同版本之間可能會有些許差異，自己編碼過程中請注意

npx vite

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

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

配置完成后之后只需要pnpm run dev啟動即可，但是此時我們還不能啟動，因為我們還缺少html文件，所以我們在目錄下創(chuàng)建index.html，其也是默認名稱，如需更該也要同步配置，同時我們需要引入一個入口文件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，因為我們前面已經(jīng)提到了vite是基于es6 module的，然后再放置一個id為app的dom節(jié)點即可，那么我們再創(chuàng)建一個main.ts和一個app.vue用于一個基礎(chǔ)vue項目的搭建：

/* 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>

這樣就是一個最基礎(chǔ)的vue項目入口文件了，但是因為是typescript項目，所以會出現(xiàn)這個錯誤：

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

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

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

此時我們發(fā)現(xiàn)這個報錯已經(jīng)消失了。

此時我們執(zhí)行

pnpm run dev

就可以快速啟動vite了，此時我們可以看到：

打開之后就看到了我們在app.vue中編寫的內(nèi)容了，這里的Vite版本2與3之間存在一些更新，如果使用的是Vite3.x此處運行就會報一個path的錯誤，這就是因為版本更新的原因，如果遇到這個問題，請將你的Node版本升級到16即可解決這個問題，好了，如果成功，打開頁面，我們已經(jīng)可以成功訪問到app.vue頁面了：

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

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

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

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

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

子項目之間的互相引用

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

pnpm install @brain-ui/components

但是此時我們發(fā)現(xiàn)會報錯：

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

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

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

此時我們就下載完成，成功創(chuàng)建了軟鏈接，因為我們是在根目錄下下載的，所以我們子項目當中都可以使用這些包，此時我們就感覺到了Monmrepo架構(gòu)的便利性了，這些包可以在開發(fā)過程中完成相互引用了。

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

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

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

最新評論