# 正文

前几节我们了解并实现了组件的直出和基本同构，完成了一个组件在服务端和浏览器端的渲染，并且实现了基本的交互-绑定事件。但这毕竟只能是算是demo,用于实际的项目开发还差的远。

所以从本节正式开始建造 react ssr 同构应用开发骨架，如同开始建造房子的骨架。

要想这个骨架能用于实际项目开发，最基本的就是要开发方便，用起来省事儿，另一个就是具备一些基础的能力，让我们只专注于业务开发。

哪些能力呢？

比如路由处理、副作用处理、seo支持、css 支持等。

现在从头开始吗？

前两节的内容呢？

当然不是，每一个小结都是层层递进的，都作为后面小结的基础，都是我们建造骨架的重要组成部分。

基于前几节的内容，同时为了方便后续的开发和调试，我们先来让这个项目的使用变得方便一些，就像是建房子的工具，不然咱们这个房子盖的太累，浪费时间和精力。

怎样才能更方便呢？

# 工程化支持第一步

大家有没有发现我们现在的 demo存在严重的体验问题。

服务的运行需要经过多次手动操作。

前端代码的构建需要手动执行编译

npm run dev

服务端代码的编译需要手动执行编译

npm run babel-node

最后手动启动服务

node app.js

后续的文件改动还要重新执行上面的步骤。

大家可以自行运行起来，体验一下这个过程。

工欲善其事，必先利其器

这种开发体验太差了，会浪费我们很多时间且严重影响心情，良好的开发体验可以让我们事半功倍，心情舒畅。

既然这样，那我们势必需要进行优化，通过程序或者工具来代替人工执行，以达到提升效率的目的。

# 确定优化目标

如何实现这个优化呢？

做之前我们先进行问题分析，然后设计出一套解决方案。

首先要明确我们想达到的一个具体的目标。

• 前后端代码可以自动编译
• 每次修改代码，node 服务可以自动重启

另外我也不想自己刷新页面，所以热更新也是必须的，不过本节不打算直接介绍热更新，在后面章节会介绍。

# 实现思路分析

前端代码构建体验优化

前端代码的构建可以使用 webpack 搞定，开启 watch 功能就可以了，更改了文件就会自动打包。

后端代码构建

后端代码这里分为两部分，一个是用来处理请求的 node 代码，只运行于服务端。

另一部分就是组件以及组件相关的代码，也需要在服务端运行来完成组件的 ssr，所以我们也需要打包一份给服务端使用。

在上一节我们使用的是babel cli来编译的，当然这是一个有效的方法，还有一个更好的办法就是使用webpack来编译。

诶？也能用webpapck?

不要以为webpack只能用于前端代码的构建，一切皆模块，只要是 js 代码都可以被编译，只是编译的目标平台不同而已。

使用 webpack 编译，并且开启watch监听，就能做到实时编译了。

node 服务自启

node 服务这里要分两部分来看待。

• (1)服务的启动
• (2)服务的自启

单纯的服务启动和自启，很简单，可以使用工具nodemon来完成，不过除了使用工具外是否还有其他的方法处理？

我们可以使用自定义进程

让一个服务运行在我们创建的进程中，然后在适当的时机杀掉进程（关闭服务），重新创建一个服务进程启动服务（重启启动）。

综合分析

上面我们分析了各个环节的实现思路，单纯的实现每一步应该没什么难度，但是多个操作如何才能统一为一个操作呢？

也就是可以通过一个命令来启动前端代码编译和监听、后端代码编译和监听、同时启动 node 服务并且能够自动重启。

好了，问题很明确了，实现方案也有了。