我最近幫一位同事整理一個已經維護 7 年的 Angular 專案，結果發現一個前後端分離的專案，只有「後端」有設定 CI / CD，前端一直以來都是人工建置與部署。我在弄 CI / CD 的時候，發現了許多 npm 套件版本有依賴問題，為了能消除這些惱人的警告，花了我好幾個小時的時間才得到徹底的解決。我這次會遇到套件依賴問題，就是因為當初的開發人員搞不定，多年來一直都視而不見，依賴問題從來都沒有搞定過，每次換人維護都用 npm install --force 或 npm install --legacy-peer-deps 來解決問題，然後一代傳一代，變成祖傳的慣例，變成技術債。如果專案有個維護妥當的 package-lock.json 檔案，其實要還原套件不是什麼難事，今天這篇文章我就來深入探討這個問題。
... 繼續閱讀 ...
我昨天花了兩個小時，終於研究出怎樣才能正確設定 Azure Pipelines 存取 Azure Artifacts 的 npm 套件來源 (Feeds)，設定的過程實在讓人心力交瘁，沒想到就這麼簡單的一個授權設定要花這麼久的時間才研究出正確的設定步驟。今天我就來說說如何在 Azure Pipelines 正確地設定存取 Azure Artifacts 上的 npm 套件來源 (Feeds)。
... 繼續閱讀 ...
如果你在 Azure Artifacts 建立一個 npm Registry 讓前端團隊存取私有的 npm 套件，最先需要克服的問題就是要如何通過身分認證，但這部分的設定在 Windows 與在 Linux/macOS 設定步驟是不一樣的，這篇文章將說明如何正確的在 Windows 與 Linux/macOS 進行設定。
... 繼續閱讀 ...
在整理開發環境的時候，經常會有批次調整檔案內容的需求，我今天特別整理了 3 種不同的解決方案，這些方法都可以看情況使用！
... 繼續閱讀 ...
我們有個大型的 Angular 專案，原本在 Azure Pipelines 的 CI 都很順利，但是一個月前開始變的不穩定，常常會掛掉，而掛掉的原因是「記憶體不足」造成的。本篇文章我打算分享本次問題的 Log 內容，並提供一個解決方法。
... 繼續閱讀 ...
昨天寫了一個小工具，可以自動將現有 Angular CLI 建立的專案，轉換成有 Hot Module Replacement (HMR) 功能的版本，只要簡單一個命令 ng add hmr-enabled 就可以搞定，非常方便。不過我在發布專案到 npm registry 的過程中，卻意外遺漏了幾個重要的檔案，原來是有檔案被 .npmignore 給忽略掉了，到了今天傍晚才修復。我們就立刻來看看這個錯誤是怎樣發生的！
... 繼續閱讀 ...
許多企業在設法導入前端工程的過程中，最大的進入障礙竟然是「無法使用 npm 安裝套件」。因為真的有很多企業在嚴格執行資訊安全政策的情況下，所有開發者都無法從公司內部環境連到 npm 網站下載套件。這篇文章，我將分享幾個小技巧，幫助企業開發人員可以在內部實現簡易的 npm 離線快取。
... 繼續閱讀 ...
由於 Angular 2 官方建議採用 TypeScript 做為主要的開發語言，一般來說 TypeScript 都會建議使用 npm 進行安裝，安裝後就可以在命令提示字元下使用 tsc 命令對 *.ts 進行編譯動作。不過這幾年 TypeScript 的變化很快，轉眼都已經到 1.8 版了。雖然透過 npm 安裝 TypeScript 是很容易的一件事，不過對於有安裝過 Visual Studio 的使用者來說，這條路可能會變得異常崎嶇，如果你在用 npm 安裝過 TypeScript 並且輸入 tsc.exe -v 總是顯示 1.0 版 ( 或低於 1.8 版) 的話，這篇文章你可能要繼續看下去。
... 繼續閱讀 ...
最近由於經常在研究前端常用的各式工具，像是 npm, bower, gulp, webpack, yo, git 等等的工具用的很多，因此親手打指令執行程式的機會變多了，然而有好長一段時間間斷地出現了一些靈異現象，我卻無法解釋，直到最近終於發現了一些潛在的地雷，身處 Windows 平台下的前端工程師們不得不注意。由於我最近迷上了 Cmder 工具，在使用這套工具時可以讓我在輸入指令時，就像身在 Linux 環境下一樣自在，功能很多、支援鍵盤快速鍵、還支援命令與參數自動完成，非常好用，不過有時候卻發現他有點不太靈光，明明已經裝好了 npm 或 bower 工具，就是無法正常執行，我開啟 Windows 內建的「命令提示字元」視窗卻又可以執行。但問題是並不是永遠都不能執行，因為有時候又可以正常執行。這完全是一個農曆七月鬼打牆的概念，我將用這篇文章來說明問題背後的原理與解決方法。
... 繼續閱讀 ...