前情提要，先前寫過一篇關於發布npm的文章「第一次發布npm套件就上手」，當時是針對發布套件程式時全部流程中所需要相關設定，使用的範例是一個比較基本的情況 - 也就是直接發布 Source Code（未打包或編譯的程式）。

但還有另外一種情況是需要打包程式的情形。所謂的打包程式，也就是透過 Webpack 或 Vite 等工具做 minify、uglify、或者Typescript/SCSS等的程式編譯，將模組化的 Source Code 輸出成一包一包的 bundle程式。

現代的前端框架如 React、Vue等基本上都已內建 Webpack 或 Vite，以本文來說就是使用 Vue3專案（使用 Vite）來作為範例，但無論是要使用其它前端框架、又或者不使用框架，和本文設定方式不會有所差異，因為主要需要設置的是 vite的 config 和 packages.json，跟使用什麼框架並不會有所影響；但如果您使用的是 Webpack的話就會有比較大的差異無法直接套用了。

前言​

在我學習 RxJS的時候我發現我遇到的第一個學習障礙就是一些很相似的名詞，雖然說書裡寫的感覺好像都說了，可是還是有點模糊。

比如說：在討論 Design Pattern的時候，Observer Pattern 的「被觀察者」是 Subject，而 RxJS的世界裡是講 Observable，但 Observable裡又有多種不同特性的類別包含 Observable類別以及 Subject類別等，所以你只說「Observable」有可能指的是「被觀察者」，如果是的話它也會包含 Subject類別，而如果說的是「Observable類別」那就是針對那個類別的物件在做討論…

我花了一點時間做筆記以及整理才把這些名詞弄清楚，但真的要到熟悉也還是到實際有寫了一些摳之後了…

問題​

由於combineLatest 是用來組合多個 Observable 的事件值的，所以每一個 Observable 的事件都會被訂閱到。

如果每一個 Observable 都是「不同時」發生的，則會取得「當下」每一個 Observable 最後一次的事件值。

但現在要處理的狀況是 - 如果有多個 Observable 是「同時」發生事件的，也仍然會產生多個訂閱事件，這個就不一定符合「只取最後一次事件資料」的目的。

我在這邊所說的「同時」從程式的角度來看其實不是很精確，畢竟程式是一行一行執行的，多個 Observable 的訂閱事件也一定就會有先後順序，那就不會是同時的。但我想表達的比較像是 RxJS常用的彈珠圖上（或者也可以說是時間軸）同一時間所發生的事件。

#關於前後端 #長文

在我們公司內技術的交流和分享算是蠻頻繁的，前一段時間有一些關於前後端差異的討論；畢竟這邊前後端分工的很明確，大家有一些先入為主的想法我也早已習以為常，只是偶爾還是會覺得黑人問號這樣。

利用元旦的三天連假（雖然大概有一半時間是在耍廢），把我原本用 Hugo架的部落格文章全部搬到 Docusaurus上。

之前一直找不到我理想的部落，我最主要的困擾是很多部落格都沒有一個好的編目功能，舊的文章很容易就埋沒到分頁器中很難被檢視到。然後我又希望這個部落格是使用 Markdown格式的，所以能有的選擇就變得很侷限… （Wordpress就不符合我的需求了）。當時找了很久後是採用 Hugo，但其實不是很滿意，雖然它有 tag功能，但是還是卻少了文章分類的功能。

一直到我看到 Docusaurus才發現原來這個才是我需要的部落格。

前言​

開發 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。

依照上述需求，本文重點有二：

1. 發布至npm的相關設定及方式
2. 推上Github及布署範例網頁（Github Pages）

前言​

基於某些原因最近有在前端匯出excel檔、並且有自訂欄位樣式的需求。雖然以前就有開發過前端匯出Excel的功能，而且套件選擇也還算多實作也不難（當時是使用Export2Excel），但要自訂樣式的話我就沒做過了。

花了一段時間google發現事情似乎並沒那麼簡單。雖然說肯定是找一個套件並依api文件來實作就結束了，不會難到哪裡去；但麻煩的是網路上的資訊有些混亂，有一些教學文章又太過複雜，似乎沒看到哪個套件是比較被多數人使用並且有清晰的文件的。

花了一些時間研究，剛好找到了一個合適的套件叫 xlsx-js-style，它是使用另一個套件 SheetJS相同的API並且擴充了額外可自訂樣式的 API（SheetJS似乎沒提供樣式設定的API）。

以前幫公司協助面試過新人，早期我們在職缺條件上沒有特別列出需要有什麼前端框架的經驗，所以曾經有遇過背景是 react的受試者問說，為什麼我們是選擇框架的時候是 vue而不是 react，當時我就已經能夠很清楚得回答這個問題了，不過最近我對 react的了解有更加深入了之後，我對這有了一些新的想法…

最近聽了「產品三眼怪」的一集 Podcast： 【Podcast EP03】敏捷或瀑布開發哪個好？流程用哪種重要嗎？，覺得還不錯，我雖然是工程師但對於這樣的題目也是會想了解，就邊聽的時候隨手寫了一些筆記：