最近开发一个单页面应用(Single Page Application), 前端用Vue+Webpack, 后端用Express+Mongodb. 体验了不少新东西, 感受了热更新的高效, 记录一下.
前端框架
这次开发打算上手一下火了很久的Vue, 搜索了一下, 以vuejs-templates/webpack作为基础进行开发. 这是一套已经帮你搭好的脚手架, 包含Webpack, vue-loader和热更新, eslint, 测试.
把这个项目clone下来, 然后按照README进行安装即可.
项目是用Single File Vue Component (单文件Vue组件), 即HTML, JS, CSS集中在一个文件中, 如下形式:
我非常赞同这种形式. 根据长期的开发经验, 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', 让我一度丧失对那个库的信心想弃用.
还好后来找到了解决方案, 参考这里, 应该是因为这些库已经是内建在node中的了, 但是webpack还在尝试从node_modules找这些库.
解决方法是在webpack.config.js里面加上
node: {
fs: 'empty',
child_process: 'empty'
}
后端框架
Node + ExpressJS
这个是很常见的后端框架了. 按照Express的文档就可以搭建起一个建议的后台, 暴露一些Restful API, 没什么特别的.
MongoDB + Mongoose
之前一直想尝试MongoDB, 这次终于上手了. 这是一个非关系式数据库, 非常灵活. 按照Install MongoDB Community Edition on Windows安装到本地即可.
另外有个配套的GUI, 叫做MongoDB Compass, 装了它可以节约一些查看数据库的时间.
然后少不了的就是Mongoose了, 想在Node中操作MongoDB就需要用到这个中间件.
nodemon
前端有了热更新不能更爽, 后端也应该有. 于是引入了nodemon, 有了它再也不用老ctrl + c了. 它会帮你自动检测后端代码的修改然后自动重启服务器. 开启方式无非就是把node index.js改成nodemon index.js, 非常方便.
杀掉nodemon后重启, 端口总是被占用.
这个问题被讨论挺久的了. 有PR解决这个问题, 希望能够尽快merge.
断点调试
这点还使用得不多. 先是看到网上推荐node-inspector, 然后发现它自己都说已经有更好的解决方案了, 就是Chrome Dev Tool.
Debugging Node.js with Chrome DevTools一文中, Paul Irish大神介绍了使用Chrome DevTools断电调试的方法. 基本就是:
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
bluebird是一个promise库. 类似的库有jQuery中的Promise和Deferred, Q.
之前一直在用jquery, 现在项目中会用到Q, 再加上网上说bluebird的速度是最快的以及其他若干优点, 于是选择了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上都可以运行.