前一篇我們撰寫完了測試，也利用一些時間將表單元件做了一些優化（詳細請見 github 專案）。
接下來就要思考，如果希望這個元件可以被大家應用在不同的專案中，要怎麼做？
那就是：需要將元件打包並且發布！

過去我們使用 Vite 作為本地開發環境，並搭配 Vitest 進行測試。
但若要讓其他人能透過 npm install 或 CDN 引入，就必須把元件整理成一個乾淨的 Library。

那麼今天，就實際將元件發布到 npm 吧！

打包並發布到 NPM

初步打包

1. 加入 vite-plugin-dts，加入套件以產生型別檔

npm install -D vite-plugin-dts

2. 修改 vite.config.ts，支援 Library 模式，以及加入 vite-plugin-dts

Library 代表的是要把程式打包成可以被其他專案引用的套件或函式庫，而不是單純的網頁應用程式。

import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts'; // 加入這行

export default defineConfig({
  build: {
    outDir: 'dist', // 輸出目錄
    sourcemap: true,
    lib: {
      entry: 'src/index.ts', // 打包入口
      name: 'CustomInput', // 輸出的全域變數名稱
      fileName: 'custom-input', // 輸出檔案名稱
      formats: ['es', 'umd'], // 支援 ES Module 與 UMD 格式
    },
  },
  plugins: [dts()] // 加入這行
});

3. 修改 tsconfig.json

• declaration: true：讓 TS 生成 .d.ts。
• emitDeclarationOnly: false：保留 JS 檔案。

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "esnext",
    "module": "esnext",       
    "strict": true,         
    "esModuleInterop": true, 
    "skipLibCheck": true,     
    "types": ["vitest/globals"],
    "declaration": true,         // 產生 .d.ts 型別檔
    "emitDeclarationOnly": false,// 不只產生型別，也輸出 .js
    "outDir": "dist",            // 輸出路徑到 dist/
  },
  "include": ["src/**/*"]
}

4. 修改 package.json 加入打包相關設定

{
  "name": "custom-input",
  "version": "1.0.0",
  "description": "a custom input by un",
  "main": "dist/custom-input.umd.js", // require('custom-input') 入口
  "module": "dist/custom-input.mjs", // <script type="module"> 入口
  "types": "dist/index.d.ts", // TypeScript 型別檔的入口
  "files": [
    "dist"
  ],
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest",
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "keywords": [
    "web-component",
    "custom-input",
    "form",
    "javascript"
  ],
  "author": "Zoey", // 作者
  "license": "MIT", // MIT 開源授權，npm 會根據這個欄位標註授權
  "repository": { // 指向套件原始碼位置
    "type": "git",
    "url": "https://github.com/unlinun/2025-WC-Input"
  },
  "devDependencies": {
    "@open-wc/testing": "^4.0.0",
    "@vitejs/plugin-legacy": "^7.2.1",
    "jsdom": "^27.0.0",
    "typescript": "^5.9.2",
    "vite": "^7.1.7",
    "vite-plugin-dts": "^4.5.4",
    "vitest": "^3.2.4"
  }
}

5. 打包

npm run build

會發現結果已經輸出到定義的 dist 文件夾中了！

發佈到 npm

如果沒有帳號的，需要先至 npm 首頁進行註冊。

1. 於 terminal 輸入指令，登入 npm

npm login

2. 發布前請先至 package.json 確認 name 是否是在 npm 上唯一的名稱（在搜尋框上尋找看看）。
   發現有其他人已經用了 custom-input 這個名稱，所以我們在 package.json 重新命名。

"name": "un-custom-input",

3. 因為有改名，所以重新打包一次！

npm run build

4. 正式發佈到 npm

注意：--access public 代表公開套件，默認是 private

npm publish --access public

收到官方寄來的信件，並且也看到 npm 的網頁上有了剛剛發佈的元件囉！

使用看看吧！

開啟一個新的專案：

npm i un-custom-input

在 html 中使用 cdn 方式引入使用

<script type="module" src="https://unpkg.com/un-custom-input/dist/custom-input.mjs"></script>

做到這一步，恭喜你，元件已經正式發布到 npm 提供給大家下載囉！
明天見啦～ ლ(・´ｪ`・ლ)!