Vue3 企業級優雅實戰 - 組件庫框架 - 11 組件庫的打包構建和發佈

来源:https://www.cnblogs.com/youyacoder/archive/2023/02/10/17108743.html
-Advertisement-
Play Games

回顧第一篇文章中談到的組件庫的幾個方面，只剩下最後的、也是最重要的組件庫的打包構建、本地發佈、遠程發佈了。 1 組件庫構建 組件庫的入口是 packages/yyg-demo-ui，構建組件庫有兩個步驟： 添加 TypeScript 的配置文件： tsconfig.json 添加 vite.conf ...


回顧第一篇文章中談到的組件庫的幾個方面，只剩下最後的、也是最重要的組件庫的打包構建、本地發佈、遠程發佈了。

1 組件庫構建

組件庫的入口是 packages/yyg-demo-ui，構建組件庫有兩個步驟：

  1. 添加 TypeScript 的配置文件： tsconfig.json
  2. 添加 vite.config.ts 配置文件，配置打包方式。

1.1 tsconfig.json

在 packages/yyg-demo-ui 中添加 tsconfig.json 文件：

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "declaration": true,
    "baseUrl": "."
  },
  "include": ["../**/*.ts", "../**/*.d.ts", "../**/*.tsx", "../**/*.vue"],
  "exclude": ["../**/node_modules/"]
}

1.2 vite.config.ts

打包構建時需要提取類型定義，可以使用 vite 插件 vite-plugin-dts。首先在 packages/yyg-demo-ui 中添加該插件為開發依賴：

pnpm install vite-plugin-dts -D

然後創建 vite.config.ts 文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'
import VueJsx from '@vitejs/plugin-vue-jsx'
import viteDts from 'vite-plugin-dts'

export default defineConfig({
  plugins: [
    vue(),
    VueJsx(),
    viteDts({
      insertTypesEntry: true,
      staticImport: true,
      skipDiagnostics: true
    })
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, './index.ts'),
      name: 'yyg-demo-ui',
      fileName: format => `yyg-demo-ui.${format}.js`
    },
    outDir: path.resolve(__dirname, '../../lib'),
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

1.3 package.json

在 packages/yyg-demo-ui/package.json 中添加打包 scripts，上面的配置指定了打包輸出目錄為項目根目錄下的 lib，每次打包前希望先刪除該目錄，可以使用 rimraf。在該模塊中先安裝 rimraf：

pnpm install rimraf -D

在 package.json 中添加 script：

"scripts": {
  "build": "rimraf ../../lib && vue-tsc --noEmit && vite build"
},

執行 pnpm run build 開始打包。

image

打包成功後，項目根目錄下生成 lib 目錄，包括 ES 規範和 UMD 規範和類型定義文件。

2 組件庫的本地發佈

2.1 根目錄 package.json scripts

到目前為止，整個組件庫有很多個包，每個包都有一些 scripts：

cli:
	- gen: 創建新組件
docs：
	- dev：本地開發組件庫文檔
	- build：打包構建組件庫文檔
	- serve：預覽組件庫文檔打包
example：
	- dev:dev、dev:uat、dev:prod：本地開發 example
	- build:dev、build:uat、build:prod：打包構建 example
	- preview：預覽 example 打包構建後的結果
packages/yyg-demo-ui:
	- build：打包構建組件庫

上面這些 scripts 都需要進入到對應的目錄執行，這樣比較麻煩，所以可以將這些命令彙總到根目錄的 package.json 中，這樣無論是哪個模塊的 scripts，都從根目錄執行即可。

"scripts": {
  "dev:dev": "pnpm run -C example dev:dev",
  "dev:uat": "pnpm run -C example dev:uat",
  "dev:prod": "pnpm run -C example dev:prod",
  "build:dev": "pnpm run -C example build:dev",
  "build:uat": "pnpm run -C example build:uat",
  "build:prod": "pnpm run -C example build:prod",
  "preview:example": "pnpm run -C example preview",
  "build:lib": "pnpm run -C packages/yyg-admin-ui build",
  "docs:dev": "pnpm run -C docs dev",
  "docs:build": "pnpm run -C docs build",
  "docs:preview": "pnpm run -C docs serve",
  "gen:component": "pnpm run -C cli gen",
  "lint": "eslint \"{cli,packages,docs,example}/**/*.{js,ts,vue,jsx,tsx}\" --fix"
},

通過 -C 指定 scripts 的位置。

2.2 安裝本地私服 verdaccio

幾個月前程式員優雅哥分享過使用 Docker 搭建 Nexus3 私服，Nexus3 相對重量級，如果在本地測試，使用 verdaccio 即可，verdaccio 算得上本地的一款輕量級私服了。

  1. 安裝 verdaccio

verdaccio 通常是全局安裝（-g），在咱們組件庫中為了大家 clone 代碼操作方便，便將其安裝到根目錄的開發依賴中：

pnpm install verdaccio -D -w
  1. 啟動 verdaccio

在根目錄 package.json 的 scripts 中添加啟動 verdaccio 的命令

"start:verdaccio": "pnpm verdaccio",

這一步可省略，只因為我用 WebStorm，添加到 scripts中不用每次輸入命令，能偷懶的必須偷懶。

執行 start:verdaccio 後，控制台會提示訪問地址 http://localhost:4873/ 。在瀏覽器中訪問該路徑。

image

  1. 創建用戶、登錄

在瀏覽器中按照界面提示創建用戶、登錄。在命令行中執行下列命令創建用戶：

npm adduser --registry http://localhost:4873/

依次輸入用戶名、密碼、郵箱，回車便成功創建賬號並自動登錄上。

使用剛纔輸入的用戶名和密碼，在瀏覽器中登錄，登錄前刷新瀏覽器。

2.3 本地發佈

在發佈前，需要修改項目根目錄 package.json 的幾個地方：

  1. 添加如下配置，指定 private 為 false、設置 main、module、types、files等屬性：
{
  ...
  "private": false,
  "type": "module",
  "main": "./lib/yyg-demo-ui.umd.js",
  "module": "./lib/yyg-demo-ui.es.js",
  "types": "./lib/yyg-demo-ui/index.d.ts",
  "files": [
    "./lib",
    "package.json",
    "README.md"
  ],
  "exports": {
    ".": {
      "require": "./lib/yyg-demo-ui.umd.js",
      "import": "./lib/yyg-demo-ui.es.js"
    }
  },
  ...
}
  1. 自己修改 author；
  2. 在 scripts 中添加發佈組件庫的命令：
"pub:local": "pnpm publish --registry http://localhost:4873/",
  1. 在項目根目錄下添加一份 README.md 文件。

在發佈前，如果代碼納入 git 管理，需要提交代碼，再執行 pnpm run pub:local。顯示如下信息則發佈成功：

image

刷新瀏覽器，可以看到剛纔發佈的組件庫。

3 測試使用組件庫

3.1 創建新項目

使用 vite 或 yyg-cli 創建新的 vue 項目：

pnpm create vite

進入新創建的 vue 項目，pnpm install 安裝依賴，依賴安裝成功後先執行 pnpm run dev 測試項目是否正常運行。

3.2 安裝依賴

由於咱們的組件庫依賴於 element-plus，故首先安裝element-plus：

pnpm install element-plus

由於安裝咱自己的組件庫需要指定 registry，registry 變了，pnpm 需要重新執行 install：

pnpm install --registry http://localhost:4873/

最後指定 registry 安裝咱們的組件庫：

pnpm install yyg-demo-ui --registry http://localhost:4873/

3.3 引入組件庫

在 main.ts 中引入 element-plus 和 yyg-demo-ui：

...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import YygDemoUi from 'yyg-demo-ui'

createApp(App)
    .use(ElementPlus)
    .use(YygDemoUi)
    .mount('#app')

在 App.vue 中使用組件庫中的 foo 組件：

<yyg-foo msg="測試組件庫"></yyg-foo>

啟動項目，測試運行效果。從瀏覽器和瀏覽器 console 中可以看出一切正常。這樣組件庫便成功發佈了。

4 其他說明

  1. 發佈到 npmjs 與本地發佈的操作一樣，registry 需要指定為 https://registry.npmjs.org/
  2. 無論是發佈到本地還是 npmjs，如果提示無許可權，都可以使用 npm login 先登錄：
npm login --registry http://xxxxxx
  1. 再次發佈前需要修改版本號。可以使用如下 npm 命令修改版本號：
// 最後一位（patch）版本號加1
npm version patch

// 中間一位（minor）版本號加1
npm version minor

// 第一位（major）版本號加1
npm version major

組件庫的打包構建和發佈，咱就聊到這裡。

感謝閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，瞭解更多內容工薇號“程式員優雅哥”。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • DataX二次開發——HdfsReader和HdfsWriter插件增加parquet文件讀寫
    一、研發背景 DataX官方開源的版本支持HDFS文件的讀寫，但是截止目前，並沒有支持Parquet文件的讀寫，得益於DataX出色的數據同步性能，去年公司的項目大部分採用了DataX作為數據同步工具，但是從CDH集群同步Parquet或者將其他數據源的數據以Parquet格式寫入HDFS，這兩個常 ...
  • DataX同步mysql數據報錯 無法連接mysql
    前文回顧 實現一個簡單的Database系列 譯註：cstack在github維護了一個簡單的、類似sqlite的資料庫實現，通過這個簡單的項目，可以很好的理解資料庫是如何運行的。本文是第八篇，主要是對B-tree的葉子節點格式的實現 Part 8 B-Tree葉子節點格式 我們準備把表的格式從非排 ...
  • Postgresql通過docker進行高可用部署
    Postgresql通過docker進行高可用部署 在postgresql官網看了pgpool-II的文檔，發現部署比較麻煩 pgpool-II官方文檔：https://www.pgpool.net/mediawiki/index.php/Documentation 為了方便快捷還是使用docker ...
  • 實現自有App上架小游戲其實並非難事
    2022年12月22日工業和信息化部令第57號公佈，自2023年7月1日起施行 主要總結為以下幾點： 1.型號核准證的有效期不短於2年，不超過5年，型號核准證每次延續的有效期不超過5年 2.微功率短距離無線電發射設備使用說明中應當註明“使用微功率短距離無線電發射設備應當符合國家無線電管理有關規定”字 ...
  • 1.html篇之《html基礎入門》
    html基礎入門 1. 什麼是html Hypertext Markup Language 超文本標記語言 2. 基本結構 <!DOCTYPE html> <!-- 註釋：此為html5的聲明方式 --> <html> <head></head> <body></body> </html> 順序 聲 ...
  • 記錄--數組去重的五種方法
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 您或許會疑惑，網上那麼多去重方法，這篇文章還有什麼意義？ 彆著急，這篇文章只節選了簡單的，好玩的，古老的，有實際講解意義的去重方法,除了去重的實現以外，我還將和您分享這其中的其他細節和拓展。 您或許不理解，為什麼只有五種？ 當然，我 ...
  • 30個Javascript知識點總結，總有你不會的！
    摘要：本文帶大家學習一下關於CSS屬性的繼承。 本文分享自華為雲社區《關於CSS有哪些屬性可以繼承？》，作者：黛琳ghz。 前言 今天遇到一個很有意思的題目，通過題目可以順便學習一下關於CSS屬性的繼承。（答案是ACD） 關於CSS屬性繼承 字體系列屬性 font：組合字體font-family：規 ...
  • vue 甘特圖 一行多條任務 可拖拽
    #1、安裝 highcharts npm install highcharts --save #2、頁面引用 // 引入 import Highcharts from 'highcharts/highcharts-gantt.src.js' // 引入拖拽 import factory from ' ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類