公司要求用Angular+Sequelize, 周末趁著一波有空, 竟然兩天搞到半夜都還沒(méi)搞定最簡(jiǎn)單的從一張數(shù)據(jù)庫(kù)表里取幾條數(shù)據(jù), 展示成一個(gè)table. 吐血寫(xiě)一篇踩過(guò)的坑, 以及最后卡住的坑.

上來(lái)安裝nodejs和angular, 沒(méi)啥問(wèn)題, 下載最新版安裝一頓操作, 環(huán)境變量搞定. 然后ng new 命令建立了項(xiàng)目, 啟動(dòng)VS Code, 開(kāi)搞!

寫(xiě)了個(gè)*ngFor循環(huán)輸出了個(gè)table, ts代碼寫(xiě)一個(gè)對(duì)象數(shù)組(hard code), 展示table無(wú)問(wèn)題.

hard code的數(shù)組

ngFor循環(huán)輸出一個(gè)table

table展示的樣子

到目前為止, 信心滿(mǎn)滿(mǎn).

然后加入sequelize, 這個(gè)帶著光環(huán), 哦不, github star最高的nodejs orm. 為了消除數(shù)據(jù)庫(kù)各種配置的問(wèn)題, 我先嘗試了sqlite這個(gè)內(nèi)存數(shù)據(jù)庫(kù). 然后new一個(gè)Sequelize連接看看? 隨后就開(kāi)始報(bào)一堆亂七八糟的錯(cuò).

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

編譯錯(cuò)誤, 一頭霧水

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

二. 這回編譯是沒(méi)問(wèn)題了, 咦? 怎么瀏覽器里啥也沒(méi)了? 打開(kāi)F12一看, 報(bào)錯(cuò):

Buffer not defined?

這又是什么喪心病狂的錯(cuò)誤? 特么一個(gè)Hello World級(jí)別的小網(wǎng)頁(yè), 我哪里用到Buffer了... 又是一頓瘋狂搜索, 某大神說(shuō)如下可以解決:

不知所云的fix ~~~

至此, 我已經(jīng)totally lost, 這代碼到底是干嘛? 幸運(yùn)的是原來(lái)的錯(cuò)誤是解決了. 到這里已經(jīng)花了我1天多時(shí)間了...

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

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

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

其實(shí)這問(wèn)題的原因是因?yàn)閟equelize的依賴(lài)項(xiàng)由于和webpack和angular的版本沖突, 反正就是沒(méi)打包進(jìn)去. 有人通過(guò)webpack的pkg解決了這問(wèn)題. 寫(xiě)了一堆我不知道該放哪的代碼.... 反正我到目前還沒(méi)解決.

最后發(fā)個(gè)牢騷, angular的語(yǔ)法功能是挺好的, 但它的依賴(lài)項(xiàng)真的真的太多了... 新建一個(gè)angular網(wǎng)站項(xiàng)目, 完全是新建的哦, 居然有900多項(xiàng)依賴(lài)項(xiàng). 900多項(xiàng)!!! 以前做java, maven里從來(lái)沒(méi)超過(guò)100個(gè)依賴(lài)項(xiàng)吧.

最后想說(shuō), 經(jīng)過(guò)2天折騰, 瞬間不愛(ài)了.... 哦不, 本來(lái)就沒(méi)愛(ài)過(guò).