1. npm install babel-cli --save

这个是babel命令行工具，我们要用到它里面的babel-node。设置node环境为test，默认为node 修改为nodemon --exec babel-node。

2. npm i --save-dev cross-env

能跨平台设置及使用环境变量

3. 配置pkg.json运行脚本参数

  1. "scripts": {
  2.     "start": "node scripts/start.js",
  3.     "build": "node scripts/build.js",
  4.     "test": "node scripts/test.js --env=jsdom",
  5.     "server": "cross-env NODE_ENV=test nodemon --exec babel-node server/server.js",
  6.     "server1": "nodemon server/server.js"
  7.   },

4. 如果是react服务端渲染架构，还需要支持jsx语法

配置.babellrc

  1. {
  2.   "presets": [
  3.     "react-app"
  4.   ],
  5.   "plugins": [
  6.     "transform-decorators-legacy"
  7.   ]
  8. }

5. 运行时发现控制台报错，不识别.scss文件

npm install css-modules-require-hook --save
安装好后引入配置，新建cmrh.conf.js

  1. module.exports = {
  2.     generateScopedName: '[name]__[local]___[hash:base64:5]',
  3. }

然后在server端改造，引入css-hook，注意，必须放在第一行

  1. require('css-modules-require-hook')({
  2.   extensions: ['.scss'],
  3.   preprocessCss: (data, filename) =>
  4.     require('node-sass').renderSync({
  5.       data,
  6.       file: filename
  7.     }).css,
  8.   camelCase: true,
  9.   generateScopedName: '[name]__[local]__[hash:base64:8]'
  10. })
  12. //改造your code
  13. const Routes = require('./../src/routes')
  15. //...

6. 遇到新坑

对于封装的Routers组件，引入方式为：

  1. const Routers = require('./../src/routers')

拿到的Routers其实是{default: Routers}。
所以应该改为：

  1. const Routers = require('./../src/routers').default

7. 如果图片无法识别

npm install asset-require-hook --save安装图片处理模块

  1. // 处理图片
  2. import assethook from 'asset-require-hook';
  3. assethook({
  4.     extensions: ['png', 'jpg']
  5. });

8. 现在查看页面源码

  1. <div class="page code-wrap cont-wrap ovf" data-reactroot=""><div class="Login-ways"><a class="inl-b Login-ways-cell active">手机快捷登录</a><a class="inl-b Login-ways-cell">账号密码登录</a></div><div class="FormArea code-content"><form class="NoPassForm" method="post"><div class="group-num rel"><a class="countryCode tc abs inl-b">+278</a><i class="icon icon-close hidden"></i><input type="tel" class="phone-input ipt-primary" placeholder="请输入手机号"/></div><div class="group-num rel"><i class="icon icon-close hidden"></i><input type="tel" class="npl-identity ipt-primary" placeholder="请输入验证码" maxLength="6"/><a class="fetch-ident abs tc">获取验证码</a><a class="fetch-ident disabled hidden"><span>60</span>s后重发</a></div></form><form class="PasswordForm" method="post"><div class="group-num rel"><a class="countryCode tc abs inl-b">+86</a><i class="icon icon-close hidden"></i><input type="text" class="account-input ipt-primary" placeholder="请输入您的账号"/></div><div class="group-num rel"><i class="icon icon-close hidden"></i><input type="number" class="password-input ipt-primary" placeholder="请输入密码"/></div></form></div><ul><li>nardo</li><li>a.jpg</li></ul><button>change name</button><br/><button>show dialog</button></div>

发现已经成功渲染了，但是页面样式仍然没生效，而且没有html文件的head标签。

一个完整的页面，需要html body head 等标签元素构成的，所以现在缺少了一个支持页面的骨架，所以就在server端加上骨架返回给前端，对server.js进行改造如下：

  1. //  搭建页面骨架
  2. const _frontHtml = `<!DOCTYPE html>
  3. <html lang="en">
  4.     <head>
  5.       <meta charset="utf-8"/>
  6.       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  7.       <title>XM聊天室</title>
  8.     </head>
  9.     <body>
  10.       <noscript>
  11.         You need to enable JavaScript to run this app.
  12.       </noscript>
  13.       <div id="root">
  14.         ${frontComponents}
  15.       </div>
  16.     </body>
  17.   </html>
  18. `
  19. res.send(_frontHtml)

可以看到页面骨架也渲染出来了，但是还缺少我们需要引用的js和css。

9.引入静态资源

每次build以后，我们的打包目录，有一个asset-manifest.json的文件，里面有我们想要的css和js，我们引入它，就可以拿到每次build以后最新的代码，对server.js进行代码改造如下：

  1. import buildPath from '../build/asset-manifest.json';

然后在骨架中添加引用地址

  1. <head>
  2.     <meta charset="utf-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  4.     <meta name="theme-color" content="#000000">
  5.     <title>人才市场</title>
  6.     <link rel="stylesheet" type="text/css" href="/${buildPath['main.css']}">                
  7. </head>
  8. <body>
  9.     <noscript>
  10.         You need to enable JavaScript to run this app.
  11.     </noscript>
  12.     <div id="root">
  13.         ${frontComponents}
  14.     </div>
  15.     <script src="/${buildPath['main.js']}"></script>
  16. </body>

ok，改造完成，现在已经可以看到完整的页面。

待更新点：
React16服务端渲染新api: renderToNodeStream可以提升性能3倍以上。