基於 CSS Grid 的簡易拖拉拽 Vue3 組件，從代碼到NPM發佈（2）- NPM發佈、在線示例詳情 - 前端,vue3,組件庫,拖拽,typescript xachary 博客

這裏分享一下本開源項目是如何構建組件庫及其如何發佈到NPM上的，還有組件庫與在線示例的構建有什麼差異。

請大家動動小手，給我一個免費的 Star 吧~

大家如果發現了 Bug，歡迎來提 Issue 喲~

github源碼

NPM

示例地址

文檔

版本更新信息

拖動

在這裏插入圖片描述

調整大小

在這裏插入圖片描述

拖入

在這裏插入圖片描述

嵌套

有限的嵌套

關於構建

與構建有關的文件，主要有：

└─ dist - 構建的組件庫文件
└─ docs - 構建的在線示例網站
└─ src
   └─ main.ts - 在線示例代碼入口
└─ index.html - 在線示例HTML入口
└─ package.json - 庫信息
└─ tsconfig.build.json - 用於構建組件庫配套的類型聲明文件
└─ vite.config.ts - 構建配置

關鍵構建信息與命令，主要有：

package.json

{
  "name": "vue3-grid-drag-resize",
  "version": "0.0.10",
  "type": "module",
  "files": [
    "dist"
  ],
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "homepage": "https://github.com/xachary/vue3-grid-drag-resize",
  "scripts": {
    "build": "run-p type-check \"build-only {@}\" --",
    "build-docs": "run-p type-check \"build-only --mode docs {@}\" --",
    "build-only": "vite build"
  }
}

這裏列出了和構建相關的主要信息，大部分都是為了構建 NPM 組件庫必須的，指明瞭：

name 為組件庫名稱
version 版本信息
dist 為構建後的代碼目錄
./dist/index.js 為代碼入口
./dist/index.d.ts 為類型聲明文件
homepage 為顯示在 NPM 頁面中主頁信息

name 必須在 NPM 上唯一的，否則發佈會失敗。假如非要保留你的命名，可以添加自己的命名空間，例如 @xxx/vue3-grid-drag-resize。
version 每次發佈 NPM，必須增加版本號。發佈成功後，不能刪除，只能 deprecate。

詳細看
npm-publish
npm-deprecate

這裏有 3 個構建命令：

build 為構建組件庫
build-docs 為構建在線示例
build-only 為 vite build 入口

build、build-docs 通過 --mode 傳入 vite build，讓 vite build 執行不同的構建配置信息，從而構建出 dist、docs 兩個不同的目錄，dist 為組件庫、docs 為在線示例。

vite 構建配置，主要有：

vite.config.ts

// 略

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 略

import PackageJSON from './package.json'

import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
import dts from 'vite-plugin-dts'

// 略

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const m = mode === 'docs' ? 'docs' : 'dist'
  console.log('build mode:', m)

  return {
    plugins: [
      vue(),
      ...(m === 'dist'
        ? [
            dts({
              tsconfigPath: './tsconfig.build.json',
              rollupTypes: true
              // insertTypesEntry: true
            })
          ]
        : []),
      cssInjectedByJsPlugin()
    ],
    // 略
    build: {
      outDir: m,
      minify: m === 'dist',
      copyPublicDir: m === 'docs',
      lib:
        m === 'dist'
          ? {
              name: PackageJSON.name,
              entry: fileURLToPath(
                new URL('./src/lib/components/GridDragResize/index.ts', import.meta.url)
              ),
              formats: ['es'],
              fileName: 'index.js'
            }
          : undefined,
      rollupOptions:
        m === 'dist'
          ? {
              external: ['vue'],
              output: {
                globals: {
                  vue: 'Vue'
                }
              }
            }
          : undefined
    },
    // 略
  }
})

上面的 m 即 mode 修飾之後的值，要麼是 "dist" 要麼是 "docs"，即代表“組件庫”和“在線示例”。

關於“plugins”

構建組件庫的時候，會增加 vite-plugin-dts 插件的使用，其中 rollupTypes 指的是把左右類型聲明都集中到一個聲明文件中（最場景），而 tsconfig.build.json 主要是指向從那裏開始生成類型聲明：

tsconfig.build.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["src/lib/components/GridDragResize/*"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

主要關注的是 extends，其餘的信息與 tsconfig.app.json 基本一致。

值得注意是，生成的入口，必須 export 所有需要的模塊和類型：

src/lib/components/GridDragResize/index.ts

import GridDragResize from './GridDragResize.vue'
import GridDragResizeItem from './GridDragResizeItem.vue'

import './style.less'

export * from './types' // 別忘了 export 模塊以外的類型聲明

export { GridDragResize, GridDragResizeItem }

組件庫樣式

上面看到使用一個 vite-plugin-css-injected-by-js 的插件，原因是 vite 默認情況下，構建結果如下：

└─ dist - 構建的組件庫文件
   └─ index.d.ts
   └─ index.js
   └─ style.css

一般情況下，通過 import 組件即可，不應該需要額外引入 css 文件，這會造成不便。
所以，使用 vite-plugin-css-injected-by-js 插件後，構建結果變為：

└─ dist - 構建的組件庫文件
   └─ index.d.ts
   └─ index.js

此時，css 已經內嵌至 index.js 中。

關於“build”

我分開一下上面的 build 配置：

1、在線示例

build: {
  outDir: 'docs', // 輸出目錄
  minify: false, // 不 minify
  copyPublicDir: true, // 複製 public 資源
}

vite 默認以 index.html 為入口，在這裏無需過多的配置。

2、組件庫

    build: {
      outDir: 'dist', // 輸出目錄
      minify: true, // 需要 minify
      copyPublicDir: false, // 無需複製 public 資源
      lib: {
        name: PackageJSON.name, // 組件庫名稱
        entry: fileURLToPath(
          new URL('./src/lib/components/GridDragResize/index.ts', import.meta.url)
        ), // 組件庫代碼入口
        formats: ['es'], // 只構建 es 版本
        fileName: 'index' // 構建後的文件名
      },
      // 排除 vue 庫代碼
      rollupOptions: {
        external: ['vue'],
        output: {
          globals: {
            vue: 'Vue'
          }
        }
      }
    }