详解如何从零开始搭建Express+Vue开发环境

准备工作

1. 为前端选择合适的预处理工具和资源管理工具

预处理工具又分为 js 预处理工具和 css 预处理工具。Javascript 一直以来最为人诟病的一点就是缺乏原生的模块机制，所有 js 代码文件在被 html 页面引入后将共用同一个命名空间。所以才出现了各种“标准”尝试解决这个问题，但他们都不是原生的，需要额外的工具对代码进行特殊处理。虽然 ES6 终于引入了模块机制，但以现在的浏览器支持程度，还不足以“毫无顾虑地随拿随用”。所以 js 预处理工具最主要的工作就是帮助解决 js 的模块问题。而 css 预处理工具则很好理解，就是把 sass，less 或者 stylus 代码翻译、合并成 css 代码。

资源管理工具则是帮我们管理前端所需的各种资源文件（比如 css、js、图片、字体等等），便于我们引用。目前常用的解决方法是将他们直接编码进 js 代码中，然后像引用 js 模块一样引用它们。这可比手写各种 url 方便多了。

正如标题所说，我们将采用 Webpack，因为它具备上面所说的所有功能。此外还支持代码热替换，使修改代码后不用刷新页面也能在浏览器中立即看到效果。

2. 为后端选择合适的预处理工具

后端面对的都是 js 代码，不需要前端那样的资源管理工具，另外， Node 强迫你使用至少一种模块管理方案（CommonJS 或 ES6 的 import），也不用考虑代码的依赖问题。

所以后端要简单许多，唯一需要考虑的基本上就剩下如何将 ES6 转译成 ES5 了（如果你打算使用 ES6 的话）。目前常用的做法是使用 Babel，你可以用 Babel 命令行工具独立执行编译过程，也可以配置 Babel register 实现代码运行时动态翻译，这对于开发场景而言无疑是最方便的。所以我们选择后一种方式。

3. 为整个项目选择合适的流程控制工具

流程控制工具是为了帮助我们管理诸如代码检查、编译、压缩、移动、部署这些任务的，原本我们是通过手敲命令（或者高级一点写个脚本）的方式做，有了流程控制工具以后，只需要提供配置文件和少量代码就可以完成。

目前最流行的解决方案是 gulp。不过，由于我们这里要搭建的是开发环境，没有移动代码、压缩、部署等需求，所以不需要功能强大的 gulp。我们只要用 nodemon 这个工具监听代码变动然后适时重启 server就够了。