Isomorphic-React

同构系统，支持服务器端渲染及客户端渲染，对SEO友好。 为什么需要同构系统，需要补脑的这边走

技术栈

• react
• react-router
• redux & react-redux
• redux-thunk
• react-helmet
• react-router-redux
• axios
• redial
• helmet
• webpack
• babel
• Browsersync
• react-hot-loader
• postcss
• less
• sass

安装

$ git clone https://github.com/wujjpp/isomorphic-react.git
$ cd isomorphic-react
$ npm install

NOTE: 执行npm install之前，先运行 npm config set registry=http://registry.npm.taobao.org 添加npm淘宝源，可以极大的加快npm包安装速度，减少因为网络原因带来的错误，安装过程中假如出现node-sass下载xxxxx_binding.node失败情况，可以手动从淘宝镜像下载对应平台的.node文件，然后改名为binding.node复制到/node_modules/node-sass/vendor/xxxxx/目录下。

运行&打包

运行&开发

$ npm start

打包

$ npm run build

构建sit/uat/prod环境包

使用参数sit, uat或者prod进行打包，可以配置不同环境CDN路径， 没有使用CDN的情况下，请将publicPath改成 / 例如：

$ npm run build -- sit

$ npm run build -- uat

$ npm run build -- prod

NOTE：-- 与 prod之间有个空格

通过修改 /tools/config.js 配置CDN

importsharedfrom'../settings'constconfig={dev: {//这里publicPath没有直接使用`/`, 是因为在开发环境下我们需要依赖sourceMap, 具体说明可以查看：https://github.com/webpack-contrib/style-loader#recommended-configurationpublicPath: `http://127.0.0.1:${shared.frontPort}/`},sit: {//这里可以配置SIT环境CDN路径，打包完成后，将`/build/public`目录复制到CDN，完成CDN加速publicPath: '//sitcache.YourCDN.com/'},uat: {//这里可以配置UAT环境CDN路径，打包完成后，将`/build/public`目录复制到CDN，完成CDN加速publicPath: '//uatcache.YourCDN.com/'},prod: {//这里可以配置PROD环境CDN路径，打包完成后，将`/build/public`目录复制到CDN，完成CDN加速publicPath: '//cache.YourCDN.com/'}}exportdefaultObject.assign({},shared,config)

从dist运行程序

$ npm run start:dist

eslint检查

$ npm run eslint

Clean

$ npm run clean

关于条件编译

IMPORTANT：请记住，你写的React Component是要能同时运行在服务端和客户端，然而有些前端插件（实际上是大部分jquery插件）是没法运行在服务器端的， 所以我们定义了2个条件变量用于区分环境，正确使用这两个变量，可以让你愉快的使用大部分纯前端插件。

/tools/webpack/client.build.js

...
plugins: [newwebpack.DefinePlugin({'__BROWSER__': true,'__DEV__': false}),
...
] ...

你可以使用这2个变量进行条件编译

例如: 在文件 /src/routes/test/Test.js中, 我们使用 __BROWSER__ 变量通知构建工具 jquery.easypiechart 和 toastr 这两个包只有在前端文件打包的时候才需要包含, 实际上这两个包在服务器端也没什么用。

/src/routes/test/Test.js

if(__BROWSER__){require('easy-pie-chart/dist/jquery.easypiechart')vartoastr=require('toastr')}classTestextendsComponent{constructor(props,context){
...
this.updateChart=this.updateChart.bind(this)}
...
componentDidMount(){$('.chart').easyPieChart({easing: 'easeOutBounce',onStep: function(from,to,percent){$(this.el).find('.percent').text(Math.round(percent))}})this.chart=$('.chart').data('easyPieChart');this.chart.update(Math.random()*200-100)}
...
updateChart(){this.chart.update(Math.random()*200-100)}showToastr(){toastr.success('Have fun storming the castle!','Miracle Max Says')}..}

同样我们在/src/store/configureStore.js中使用__BROWSER__和__DEV__两个变量来决定只有在开发环境和浏览器环境下需要挂载Redux Dev Tools Extension， 别忘了configureStore作为redux的store配置组件，同样是需要运行在服务器端的

分析 webpack stats

构建完成之后就结束了吗？没有，我们集成了bundle文件分析工具，试着在控制台下敲入下面3条命令。你会喜欢的。

$ npm run analyse:client

$ npm run analyse:server

$ npm run analyse

Browsersync

打开http://localhost:3001可配置Browsersync

更新源码

$ git checkout master
$ git pull origin master
$ npm install

目录说明

.
├── /build/ # dist目录
├── /public/ # 存放静态资源(favicon.ico, robots.txt等，图片不需要放这里)
├── /src/ # 源码目录
│ ├── /actions/ # 存放redux actions
│ ├── /components # 系统级组件 │ ├── /configs/ # 前端运行配置文件，不同环境配置文件单独存放
│ ├── /constants/ # 存放redux action常量
│ ├── /core/ # 系统基础库
│ ├── /reducers/ # 存放redux reducers
│ ├── /routes/ # 路由&页面，需要补脑的走这里https://github.com/ReactTraining/react-router/tree/v3/examples/huge-apps
│ │ ├── /home/ # route home
│ │ │ ├──/images/ # 页面级图片资源
│ │ │ ├──/components/ # components
│ │ │ ├──/containers/ # containers
│ │ │ ├──/xxx.scss(less) # 页面级样式
│ │ │ └──/index.js # 动态路由配置文件
│ │ ├── /xxxx/ # route xxxx
│ │ │ ├──/components/ # components
│ │ │ ├──/containers/ # containers
│ │ │ └──/index.js # 动态路由配置文件
│ │ └── /index.js # 动态路由配置文件
│ └── /server.js # 服务端入口
│ ├── /server/ # 存放只运行在服务端的代码，例如:RESTful API
│ ├── /store/ # Redux store
│ ├── /styles/ # 全局样式
│ ├── /client.js # 前端入口js
│ └── /server.js # 服务端入口
├── /tools/ # 构建相关
│ ├── /analyse/ # webpack stats分析工具
│ ├── /dev-tools/ # 开发者工具
│ ├── /libs/ # 构建相关的辅助库
│ ├── /loaders/ # 自定义webpack loader
│ ├── /webpacks/ # webpack相关配置
│ ├── /build-client.js # 客户端构建脚本
│ ├── /build-server.js # 服务端构建脚本
│ ├── /build.js # 统一构建脚本
│ ├── /clean.js # 清理脚本
│ ├── /config.js # 构建配置参数
│ ├── /copy.js # 复制静态资源、复制构建资源等
│ ├── /postcss.config.js # postcss-loader配置
│ ├── /run.js # 执行任务脚本
│ ├── /start.js # 启动开发脚本
│ └── /watch.js # watch & copy
├── settings.js # dist目录，服务器端口设置
└── package.json # The list of 3rd party libraries and utilities

---

外围环境配置

• Web Storm 关闭 "safe write" , File -> Appearance & Behavior -> System Settings, 取消选中 "Use safe write (save changes to a temporary file first)"

• 安装 React Developer Tools

• 安装 Redux Dev Tools Extension

  NOTE: tools/dev-tools/chrome 包含以上两个开发工具的安装包，用chrome打开即可安装

不喜欢React？ 没关系，看看基于Marko和Vue版的同构脚手架

• isomorphic-marko NOTE: 服务端的渲染速度相对于React、Vue来说，Marko还是非常乐观的。

• isomorphic-vue

Made with ♥ by Wu Jian Ping

Feel free to contact me if you have any problem 830390@qq.com