最近开发一个单页面应用 (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 集中在一个文件中, 如下形式:
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 ''
, 让我一度丧失对那个库的信心想弃用.
还好后来找到了解决方案, 参考这里, 应该是因为这些库已经是内建在 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 上都可以运行.
来源: http://www.jianshu.com/p/7dc870d5f400