過往有寫篇 [指南] 用 Vue-SFC-Rollup 在 NPM 發佈你的第一個 Vue 套件 後，一晃也兩年過去。Vite 的橫空出世，讓開發一個 npm 的套件變得更加簡易，因為 Vite 在打包時就是使用 rollup。這篇以自己撰寫的 Parse Localized Number 為例子，撰寫一下開發環境上要注意的事項。
內容
步驟
1. 先用 npm/yarn create vite 來快速建立一個專案。專案名稱請輸入自己喜歡的，framework 為 vanilla，variant 為 typescript
2. 接著有 5 個檔案會需要細調，這邊整理重點如下：
一、package.json
name：套件的名稱
exports：當他人安裝套件時，你無法確定它是用 require 還是 import。所以你會需要一個 import 和 require 的路徑
main：預設的主路徑入口 ( entrypoint )
module：若專案宣告是使用 module 時的主路口路徑
typings：這個是給 TS 抓取型別用
files：當他人安裝專案後，告知要把哪個資料夾當做根目錄
keywords：方便在 npm 上搜尋到你的專案的一些關鍵字
二、.eslint.cjs
在 package.json 中，需確認有安裝 @types/node, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint
三、jest.config.cjs
在 package.json 中，確認安裝 ts-jest, @types/jest
四、tsconfig.ts
compilerOptions.types 需要將 @types/jest 加入；exclude 要排除 “node_modules”, “**/*.test.ts”；若有設置別名的話，要在 compilerOptions.paths 加入
五、vite.config.ts
若你有要設置別名，請在 resolve.alias 中加入。
完整的設定檔可參見如下：
P.S. 你可以藉由 yarn build 來看套件實際輸出後，其路徑會長什麼樣子。若你的 package.json 對不上的話，那他人在安裝時就會報錯
測試
1. 若你的專案資料夾名稱是 parse-localized-number，那就在專案根目錄下輸入 npm link parse-localized-number。你就會發現在 node_modules 資料夾內生成了一個 link。
2. 接著新開一個專案，在新的專案中試著引入 parse-localized-number，便可測試效果了
3. 測試結束後，記得用 npm unlink parse-localized-number 將連結移除
4. 若你發現套件有錯誤，想要調整後重新測試，那記得要手動在專案根目錄 unlink 然後再 link 一次即可
發佈
1. 在專案根目錄下，輸入 npm login 完成登入
2. 接著輸入 npm publish 即可
3. 每一次發佈的版號都需要不同，才能正常發佈
成品
https://www.npmjs.com/package/parse-localized-number
參考資料
1. NPM package development with Vite
2. 一文搞懂npm link原理
3. plugin:vite:import-analysis Failed to resolve entry for package “xxx”. The package may have incorrect main/module/exports specified in package.json
4. How to Create and Publish an NPM Package – a Step-by-Step Guide
