公司要求用Angular+Sequelize, 周末趁著一波有空, 竟然兩天搞到半夜都還沒搞定最簡單的從一張數據庫表里取幾條數據, 展示成一個table. 吐血寫一篇踩過的坑, 以及最后卡住的坑.

上來安裝nodejs和angular, 沒啥問題, 下載最新版安裝一頓操作, 環境變量搞定. 然后ng new 命令建立了項目, 啟動VS Code, 開搞!

寫了個*ngFor循環輸出了個table, ts代碼寫一個對象數組(hard code), 展示table無問題.

hard code的數組

ngFor循環輸出一個table

table展示的樣子

到目前為止, 信心滿滿.

然后加入sequelize, 這個帶著光環, 哦不, github star最高的nodejs orm. 為了消除數據庫各種配置的問題, 我先嘗試了sqlite這個內存數據庫. 然后new一個Sequelize連接看看? 隨后就開始報一堆亂七八糟的錯.

一. 第一個是編譯錯誤: Can't resolve 各種各樣的是什么鬼, 谷歌百度瘋狂搜索, 哦哦原來這些各式各樣的都是瀏覽器的東東... hm... 怎么解釋呢, 就是這些對象是瀏覽器自帶的, 不需要編譯. (我是這么理解的.. 請大神補充).

編譯錯誤, 一頭霧水

那怎么解決呢, 就是往package.json里塞這么一堆東東. 也就是告訴angular (其實是webpack), 這些鬼東西是瀏覽器自帶的, 別折騰!

二. 這回編譯是沒問題了, 咦? 怎么瀏覽器里啥也沒了? 打開F12一看, 報錯:

Buffer not defined?

這又是什么喪心病狂的錯誤? 特么一個Hello World級別的小網頁, 我哪里用到Buffer了... 又是一頓瘋狂搜索, 某大神說如下可以解決:

不知所云的fix ~~~

至此, 我已經totally lost, 這代碼到底是干嘛? 幸運的是原來的錯誤是解決了. 到這里已經花了我1天多時間了...

三. 迫不及待, ng serve, 刷新頁面, 怎么還是一片空白? F12里錯誤信息變了.

納尼? 我明明安了sqlite3的lib啊, 搞妹啊. 大家懂得, 先是npm uninstall / npm install 來回折騰. 無果! 隨即求助谷歌百度大神, 竟然發現NN多人碰到這類問題, 并在sequelize的support論壇上提交了問題. 每個帖子都是一番激烈討論, 然后沒一個簡單高雅的解決方案.

看了差不多兩小時的帖子, 嘗試了npm rebuild無果, 把sqlites安裝到global, 無果!

其實這問題的原因是因為sequelize的依賴項由于和webpack和angular的版本沖突, 反正就是沒打包進去. 有人通過webpack的pkg解決了這問題. 寫了一堆我不知道該放哪的代碼.... 反正我到目前還沒解決.

最后發個牢騷, angular的語法功能是挺好的, 但它的依賴項真的真的太多了... 新建一個angular網站項目, 完全是新建的哦, 居然有900多項依賴項. 900多項!!! 以前做java, maven里從來沒超過100個依賴項吧.

最后想說, 經過2天折騰, 瞬間不愛了.... 哦不, 本來就沒愛過.