最近開發(fā)一個單頁面應(yīng)用(Single Page Application), 前端用Vue+Webpack, 后端用Express+Mongodb. 體驗了不少新東西, 感受了熱更新的高效, 記錄一下.
前端框架
這次開發(fā)打算上手一下火了很久的Vue, 搜索了一下, 以vuejs-templates/webpack作為基礎(chǔ)進行開發(fā). 這是一套已經(jīng)幫你搭好的腳手架, 包含Webpack, vue-loader和熱更新, eslint, 測試.
把這個項目clone下來, 然后按照README進行安裝即可.
項目是用Single File Vue Component (單文件Vue組件), 即HTML, JS, CSS集中在一個文件中, 如下形式:
我非常贊同這種形式. 根據(jù)長期的開發(fā)經(jīng)驗, HTML, JS和CSS本來就應(yīng)該整體組成一個部件. 之前的項目中使用RequireJS, HTML和JS在同一個目錄結(jié)構(gòu)中, 而CSS在另一個近乎一樣的平行目錄結(jié)構(gòu)中, 添了不少麻煩.
運行npm run dev可以進行本地開發(fā). 由于有熱更新, 你在.vue文件中的任何修改, 一旦保存, 會立即更新到瀏覽器中, 無需刷新, 而且更重要的是, 保持當(dāng)前頁面的狀態(tài). 傳統(tǒng)開發(fā)中, 你修改了代碼要刷新才能讓新代碼生效, 同時頁面的狀態(tài)也丟失了(比方說需要點擊10次才能達到的狀態(tài)). 但是熱更新讓你可以延續(xù)當(dāng)前頁面狀態(tài), 無疑大大提高了開發(fā)效率.
Webpack的一個小坑
我引入了一個庫后一旦npm run dev就提示我Can't resolve 'fs'或者Can't resolve 'child_process', 讓我一度喪失對那個庫的信心想棄用.
還好后來找到了解決方案, 參考這里, 應(yīng)該是因為這些庫已經(jīng)是內(nèi)建在node中的了, 但是webpack還在嘗試從node_modules找這些庫.
解決方法是在webpack.config.js里面加上
node: {
fs: 'empty',
child_process: 'empty'
}
后端框架
Node + ExpressJS
這個是很常見的后端框架了. 按照Express的文檔就可以搭建起一個建議的后臺, 暴露一些Restful API, 沒什么特別的.
MongoDB + Mongoose
之前一直想嘗試MongoDB, 這次終于上手了. 這是一個非關(guān)系式數(shù)據(jù)庫, 非常靈活. 按照Install MongoDB Community Edition on Windows安裝到本地即可.
另外有個配套的GUI, 叫做MongoDB Compass, 裝了它可以節(jié)約一些查看數(shù)據(jù)庫的時間.
然后少不了的就是Mongoose了, 想在Node中操作MongoDB就需要用到這個中間件.
nodemon
前端有了熱更新不能更爽, 后端也應(yīng)該有. 于是引入了nodemon, 有了它再也不用老ctrl + c了. 它會幫你自動檢測后端代碼的修改然后自動重啟服務(wù)器. 開啟方式無非就是把node index.js改成nodemon index.js, 非常方便.
殺掉nodemon后重啟, 端口總是被占用.
這個問題被討論挺久的了. 有PR解決這個問題, 希望能夠盡快merge.
斷點調(diào)試
這點還使用得不多. 先是看到網(wǎng)上推薦node-inspector, 然后發(fā)現(xiàn)它自己都說已經(jīng)有更好的解決方案了, 就是Chrome Dev Tool.
Debugging Node.js with Chrome DevTools一文中, Paul Irish大神介紹了使用Chrome DevTools斷電調(diào)試的方法. 基本就是:
node --inspect index.js- Chrome中訪問
about:inspect, 它會把你重定向到chrome://inspect -
你看到的應(yīng)該如下圖, 點擊那個Target下面的inspect即可.
chrome://inspect screenshot -
彈出的Chrome DevTools里面可以設(shè)置斷點.
image.png
nodemon + Chrome Devtool
運行nodemon --inspect index.js即可. 但是發(fā)現(xiàn)nodemon自動重啟后, 需要重新在chrome://inspect里面點擊一下Inspect才行.
工具庫
bluebird
bluebird是一個promise庫. 類似的庫有jQuery中的Promise和Deferred, Q.
之前一直在用jquery, 現(xiàn)在項目中會用到Q, 再加上網(wǎng)上說bluebird的速度是最快的以及其他若干優(yōu)點, 于是選擇了bluebird.
目前只覺得文檔對于新手不大友好(Getting Started約等于沒有, 剩下的就是API文檔了), 剛一上來會有一些沒有頭緒.
bluebird在前后端都要用到. 特別指出的是后端Mongoose本身有一個叫做mpromise
的promise庫, 但也指出可以使用bluebird作為promise庫, 詳見這里, 使用方法也很簡單.
mongoose.Promise = require('bluebird');
assert.equal(query.exec().constructor, require('bluebird'));
axios
axios是基于Promise的HTTP client, 瀏覽器和node上都可以運行.
