前情提要，先前寫過一篇關於發布npm的文章「第一次發布npm套件就上手」，當時是針對發布套件程式時全部流程中所需要相關設定，使用的範例是一個比較基本的情況 - 也就是直接發布 Source Code（未打包或編譯的程式）。
但還有另外一種情況是需要打包程式的情形。所謂的打包程式，也就是透過 Webpack 或 Vite 等工具做 minify、uglify、或者Typescript/SCSS等的程式編譯，將模組化的 Source Code 輸出成一包一包的 bundle程式。
現代的前端框架如 React、Vue等基本上都已內建 Webpack 或 Vite，以本文來說就是使用 Vue3專案（使用 Vite）來作為範例，但無論是要使用其它前端框架、又或者不使用框架，和本文設定方式不會有所差異，因為主要需要設置的是 vite的 config 和 packages.json，跟使用什麼框架並不會有所影響；但如果您使用的是 Webpack的話就會有比較大的差異無法直接套用了。
開發 Vue專案過程當中遇過各種node環境的神秘問題。最奇怪的是本機端的 node版本和 server端完全相同，但是本機端的 npm install和 npm build是正常時，確不能保證 server端也同樣沒有問題。
我自己將常遇到的問題整理成筆記順便分享給大家。但每個人的開發環境及可能遇到的問題皆不相同，所以就僅供參考了。
本篇文章以我自己開發的一個 library - vue-component-sandbox作為範例，說明發佈 javascript程式到 npm上面所需的相關步驟及設定。
以這個範例來說，vue-component-sandbox的主程式是一個 Vue.js 的 Component，我希望除了將主程式發布到 npm上以外，還希望能建立一個簡單的展示頁面，所以我選擇用vue-cli建立專案，把主程式和展示網頁放在相同專案裡。整個專案我推上Github並使用Github Pages布署靜態的展示頁面，並將Component檔案所在的資料夾發布至npm。
依照上述需求，本文重點有二：