最近开发一个单页面应用(Single Page Application), 前端用Vue+Webpack, 后端用Express+Mongodb. 体验了不少新东西, 感受了热更新的高效, 记录一下.

前端框架

把这个项目clone下来, 然后按照README进行安装即可.

Single File Vue Component

我非常赞同这种形式. 根据长期的开发经验, HTML, JS和CSS本来就应该整体组成一个部件. 之前的项目中使用RequireJS, HTML和JS在同一个目录结构中, 而CSS在另一个近乎一样的平行目录结构中, 添了不少麻烦.

运行npm run dev可以进行本地开发. 由于有热更新, 你在.vue文件中的任何修改, 一旦保存, 会立即更新到浏览器中, 无需刷新, 而且更重要的是, 保持当前页面的状态. 传统开发中, 你修改了代码要刷新才能让新代码生效, 同时页面的状态也丢失了(比方说需要点击10次才能达到的状态). 但是热更新让你可以延续当前页面状态, 无疑大大提高了开发效率.

Webpack的一个小坑

我引入了一个库后一旦npm run dev就提示我Can't resolve 'fs'或者Can't resolve 'child_process', 让我一度丧失对那个库的信心想弃用.

解决方法是在webpack.config.js里面加上

node: {
    fs: 'empty',
    child_process: 'empty'
}

后端框架

Node + ExpressJS

MongoDB + Mongoose

nodemon

杀掉nodemon后重启, 端口总是被占用.

断点调试

node --inspect index.js
Chrome中访问about:inspect, 它会把你重定向到chrome://inspect
你看到的应该如下图, 点击那个Target下面的inspect即可.

chrome://inspect screenshot
弹出的Chrome DevTools里面可以设置断点.

image.png

nodemon + Chrome Devtool

运行nodemon --inspect index.js即可. 但是发现nodemon自动重启后, 需要重新在chrome://inspect里面点击一下Inspect才行.

工具库

bluebird

之前一直在用jquery, 现在项目中会用到Q, 再加上网上说bluebird的速度是最快的以及其他若干优点, 于是选择了bluebird.

目前只觉得文档对于新手不大友好(Getting Started约等于没有, 剩下的就是API文档了), 刚一上来会有一些没有头绪.

mongoose.Promise = require('bluebird');
assert.equal(query.exec().constructor, require('bluebird'));

SPA前端后端框架简述