從0搭建Vue3組件庫(五): 如何使用Vite打包組件庫

来源:https://www.cnblogs.com/zdsdididi/archive/2023/03/07/17187898.html
-Advertisement-
Play Games

本篇文章將介紹如何使用 vite 打包我們的組件庫,同時告訴大家如何使用插件讓打包後的文件自動生成聲明文件(*.d.ts) 打包配置 vite 專門提供了庫模式的打包方式,配置其實非常簡單,首先全局安裝 vite 以及@vitejs/plugin-vue pnpm add vite @vitejs/ ...


本篇文章將介紹如何使用 vite 打包我們的組件庫,同時告訴大家如何使用插件讓打包後的文件自動生成聲明文件(*.d.ts)

打包配置

vite 專門提供了庫模式的打包方式,配置其實非常簡單,首先全局安裝 vite 以及@vitejs/plugin-vue

pnpm add vite @vitejs/plugin-vue -D -w

在 components 文件下新建vite.config.ts配置文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
  build: {
    //打包後文件目錄
    outDir: "es",
    //壓縮
    minify: false,
    rollupOptions: {
      //忽略打包vue文件
      external: ["vue"],
      //input: ["index.ts"],
      output: {
        globals: {
          vue: "Vue",
        },
        dir: "dist",
      },
    },
    lib: {
      entry: "./index.ts",
      name: "easyest",
      fileName: "easyest",
      formats: ["es", "umd", "cjs"],
    },
  },
  plugins: [vue()],
});

然後在 components/package.json 添加打包命令scripts

 "scripts": {
    "build": "vite build"
  },

執行pnpm run build

image.png

同時生成了打包後的 dist 文件

image.png

但是這種打包方式最終會將整個組件庫打包到一個文件中,並且樣式文件也不能按需載入,所以我們需要修改一下配置讓打包後的結構和我們開發的結構一致,如下配置我們將打包後的文件放入 easyest 目錄下,因為後續發佈組件庫的名字就是 easyest,當然這個命名大家可以隨意

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
  build: {
    //打包文件目錄
    outDir: "es",
    //壓縮
    //minify: false,
    rollupOptions: {
      //忽略打包vue文件
      external: ["vue"],
      input: ["index.ts"],
      output: [
        {
          //打包格式
          format: "es",
          //打包後文件名
          entryFileNames: "[name].mjs",
          //讓打包目錄和我們目錄對應
          preserveModules: true,
          exports: "named",
          //配置打包根目錄
          dir: "../easyest/es",
        },
        {
          //打包格式
          format: "cjs",
          //打包後文件名
          entryFileNames: "[name].js",
          //讓打包目錄和我們目錄對應
          preserveModules: true,
          exports: "named",
          //配置打包根目錄
          dir: "../easyest/lib",
        },
      ],
    },
    lib: {
      entry: "./index.ts",
    },
  },
  plugins: [vue()],
});

執行pnpm run build,此時生成打包後的文件目錄如下

image.png

但是此時的所有樣式文件還是會統一打包到 style.css 中,還是不能進行樣式的按需載入,所以接下來我們將讓 vite 不打包樣式文件,樣式文件後續單獨進行打包。

聲明文件

到這裡其實打包的組件庫只能給 js 項目使用,在 ts 項目下運行會出現一些錯誤,而且使用的時候還會失去代碼提示功能,這樣的話我們就失去了用 ts 開發組件庫的意義了。所以我們需要在打包的庫裡加入聲明文件(.d.ts)。

安裝vite-plugin-dts,註意版本最好一致

pnpm add [email protected] -D -w

vite.config.ts引入,註意這裡同時添加了組件命名插件DefineOptions(上篇文章提到過,註意這個要寫在dts後面,源碼中可能有誤)

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import dts from "vite-plugin-dts";
import DefineOptions from "unplugin-vue-define-options/vite";
export default defineConfig({
  plugins: [
    vue(),
    dts({
      entryRoot: "./src",
      outputDir: ["../easyest/es/src", "../easyest/lib/src"],
      //指定使用的tsconfig.json為我們整個項目根目錄下,如果不配置,你也可以在components下新建tsconfig.json
      tsConfigFilePath: "../../tsconfig.json",
    }),
    DefineOptions(),
 
  ],
});

再次打包就會發現打包後文件中出現了我們需要的聲明文件

image.png

其實現在大部分前端構建腳手架都支持 esmodule 了,而 esmodule 本身就支持按需載入,所以說組件庫打包後的 es 格式它本身自帶 treeShaking,而不需要額外配置按需引入。後面我們要做的則是讓樣式文件也支持按需引入,敬請期待。

關註公眾號 web前端進階 查看完整教程

本篇文章代碼地址 如何使用Vite打包組件庫,hxd們star一下


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

-Advertisement-
Play Games
更多相關文章
  • 前言:最近幾年用MYSQL資料庫挺多的,發現了一些非常有用的小玩意,今天拿出來分享到大家,希望對你會有所幫助。 ...
  • 好家伙,本篇為《JS高級程式設計》第十章“期約與非同步函數”學習筆記 ES8 的 async/await 旨在解決利用非同步結構組織代碼的問題。 為為此增加了兩個新關鍵字:async 和 await。 1.async關鍵字 1.1.使用說明 async 關鍵字用於聲明非同步函數。 函數聲明、函數表達式、箭 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 本篇文章記錄仿寫一個el-button組件細節,從而有助於大家更好理解餓了麽ui對應組件具體工作細節。本文是elementui源碼學習仿寫系列的又一篇文章,後續空閑了會不斷更新並仿寫其他組件。源碼在github上,大家可以拉下來,npm ...
  • 我們在初學react時(有vue等其他基礎),我們在方法調用的時候通常是 方法名() 例如: import React from 'react' function test() { console.log('這是測試') } export default class Login extends Re ...
  • 什麼是單例模式 單例模式 (Singleton Pattern)又稱為單體模式,保證一個類只有一個實例,並提供一個訪問它的全局訪問點。也就是說,第二次使用同一個類創建新對象的時候,應該得到與第一次創建的對象完全相同的對象。 簡單的說就是保證一個類僅有一個實例,並提供一個訪問它的全局訪問點,這樣的模式 ...
  • 前言 最近需要用到多包管理 monorepo 開發新項目,所以提前預研一下項目搭建。 monorepo(monolithic repository)是一種項目架構,就是用一個倉庫管理多個項目(應用,庫),react和babel的源碼倉庫都是用這種方式在管理。 優缺點略過,可以參考:精讀《Monore ...
  • 首先需要明確一點,以往瀏覽器對css的支持是不同的,不同瀏覽器的樣式可能會存在差異,對待這種差異問題,需要寫幾套不同的css來相容(邊框、圓角、顏色等),這樣是非常麻煩的,瀏覽器css顯示差異化屬於瀏覽器自身的問題,跟我們的css是沒有關係的,好的瀏覽器就有好的顯示,糟糕的瀏覽器就只有普通顯示,我們 ...
  • 簡單工廠問題 簡單工廠中我們通過參數來返回不同的產品對象,如果管理的對象過多,這個工廠函數會比較龐大,且當我們需要增加一個新的產品時,需要修改這個工廠方法,違反開閉原則(對拓展開放,對修改關閉)。 為瞭解決簡單工廠模式的問題,出現了工廠方法模式。 解決簡單工廠思路 簡單工廠類圖關係類似如下: 如上圖 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...