{"id":18698171,"url":"https://github.com/wujjpp/isomorphic-react","last_synced_at":"2025-12-30T21:07:23.813Z","repository":{"id":130020063,"uuid":"86548356","full_name":"wujjpp/isomorphic-react","owner":"wujjpp","description":"React同构，支持服务端和客户端渲染，对SEO友好[react 16] [webpack 4] [babel 7] [Browsersync]","archived":false,"fork":false,"pushed_at":"2019-04-08T10:58:05.000Z","size":5635,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-28T04:25:19.262Z","etag":null,"topics":["babel","isomorphic-web","livereload","react","react-redux","react-router","redux","server-rendering","universal-web","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wujjpp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-29T06:53:00.000Z","updated_at":"2021-07-08T02:25:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"07e704f0-9692-498e-a545-e42ce0b4301d","html_url":"https://github.com/wujjpp/isomorphic-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wujjpp%2Fisomorphic-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wujjpp%2Fisomorphic-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wujjpp%2Fisomorphic-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wujjpp%2Fisomorphic-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wujjpp","download_url":"https://codeload.github.com/wujjpp/isomorphic-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239558927,"owners_count":19658929,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","isomorphic-web","livereload","react","react-redux","react-router","redux","server-rendering","universal-web","webpack"],"created_at":"2024-11-07T11:27:19.201Z","updated_at":"2025-11-08T17:30:29.188Z","avatar_url":"https://github.com/wujjpp.png","language":"JavaScript","readme":"# Isomorphic-React\n同构系统，支持服务器端渲染及客户端渲染，对SEO友好。\n为什么需要同构系统，需要补脑的[这边走](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/)\n\n[![Build Status](https://travis-ci.org/wujjpp/isomorphic-react.svg?branch=master)](https://travis-ci.org/wujjpp/isomorphic-react)\n\n## 技术栈\n- [react](https://facebook.github.io/react/)\n- [react-router](https://github.com/ReactTraining/react-router/tree/v3/docs)\n- [redux \u0026 react-redux](http://redux.js.org/docs/basics/UsageWithReact.html)\n- [redux-thunk](https://github.com/gaearon/redux-thunk)\n- [react-helmet](https://github.com/nfl/react-helmet)\n- [react-router-redux](https://github.com/reactjs/react-router-redux)\n- [axios](https://github.com/mzabriskie/axios)\n- [redial](https://github.com/markdalgleish/redial)\n- [helmet](https://github.com/helmetjs/helmet)\n- [webpack](https://webpack.js.org/)\n- [babel](https://babeljs.io/)\n- [Browsersync](https://browsersync.io/docs)\n- [react-hot-loader](https://github.com/gaearon/react-hot-loader)\n- [postcss](https://github.com/postcss/postcss)\n- [less](http://lesscss.org/)\n- [sass](http://sass-lang.com/)\n\n## 安装\n\n```shell\n$ git clone https://github.com/wujjpp/isomorphic-react.git\n$ cd isomorphic-react\n$ npm install\n```\nNOTE: 执行`npm install`之前，先运行 `npm config set registry=http://registry.npm.taobao.org` 添加npm淘宝源，可以极大的加快npm包安装速度，减少因为网络原因带来的错误，安装过程中假如出现node-sass下载xxxxx_binding.node失败情况，可以手动从[淘宝镜像](https://npm.taobao.org/mirrors/node-sass/)下载对应平台的.node文件，然后改名为`binding.node`复制到`/node_modules/node-sass/vendor/xxxxx/`目录下。\n\n## 运行\u0026打包\n\n#### 运行\u0026开发\n```shell\n$ npm start\n```\n\n#### 打包\n```shell\n$ npm run build\n```\n\n#### 构建sit/uat/prod环境包\n使用参数sit, uat或者prod进行打包，可以配置不同环境CDN路径， 没有使用CDN的情况下，请将`publicPath`改成 `/`\n例如：\n```shell\n$ npm run build -- sit\n```\n\n```shell\n$ npm run build -- uat\n```\n\n```shell\n$ npm run build -- prod\n```\n\nNOTE：`--` 与 `prod`之间有个空格\n\n通过修改 ___/tools/config.js___ 配置CDN\n```javascript\nimport shared from '../settings'\n\nconst config = {\n  dev: {\n    //这里publicPath没有直接使用`/`, 是因为在开发环境下我们需要依赖sourceMap, 具体说明可以查看：https://github.com/webpack-contrib/style-loader#recommended-configuration\n    publicPath: `http://127.0.0.1:${shared.frontPort}/`\n  },\n  sit: {\n    //这里可以配置SIT环境CDN路径，打包完成后，将`/build/public`目录复制到CDN，完成CDN加速\n    publicPath: '//sitcache.YourCDN.com/'\n  },\n  uat: {\n    //这里可以配置UAT环境CDN路径，打包完成后，将`/build/public`目录复制到CDN，完成CDN加速\n    publicPath: '//uatcache.YourCDN.com/'\n  },\n  prod: {\n    //这里可以配置PROD环境CDN路径，打包完成后，将`/build/public`目录复制到CDN，完成CDN加速\n    publicPath: '//cache.YourCDN.com/'\n  }\n}\n\nexport default Object.assign({}, shared, config)\n```\n\n#### 从dist运行程序\n```shell\n$ npm run start:dist\n```\n\n#### eslint检查\n```shell\n$ npm run eslint\n```\n\n#### Clean\n```shell\n$ npm run clean\n```\n\n\n## 关于条件编译\n**IMPORTANT**：请记住，你写的React Component是要能同时运行在服务端和客户端，然而有些前端插件（实际上是大部分jquery插件）是没法运行在服务器端的，\n所以我们定义了2个条件变量用于区分环境，正确使用这两个变量，可以让你愉快的使用大部分纯前端插件。\n\n___/tools/webpack/client.build.js___\n```javascript\n...\nplugins: [\n  new webpack.DefinePlugin({\n    '__BROWSER__': true,\n    '__DEV__': false\n  }),\n  ...\n]  \n...\n```\n你可以使用这2个变量进行条件编译\n\n例如: 在文件 `/src/routes/test/Test.js`中, 我们使用 `__BROWSER__` 变量通知构建工具 `jquery.easypiechart` 和 `toastr` 这两个包只有在前端文件打包的时候才需要包含, 实际上这两个包在服务器端也没什么用。\n\n___/src/routes/test/Test.js___\n```javascript\nif (__BROWSER__) {\n  require('easy-pie-chart/dist/jquery.easypiechart')\n  var toastr = require('toastr')\n}\n\nclass Test extends Component {\n  constructor(props, context) {\n    ...\n    this.updateChart = this.updateChart.bind(this)\n  }\n  ...\n  componentDidMount(){    \n    $('.chart').easyPieChart({\n      easing: 'easeOutBounce',\n      onStep: function(from, to, percent) {\n        $(this.el).find('.percent').text(Math.round(percent))\n      }\n    })\n    this.chart = $('.chart').data('easyPieChart');\n    this.chart.update(Math.random() * 200 - 100)\n  }\n  ...\n\n  updateChart() {\n    this.chart.update(Math.random() * 200 - 100)\n  }\n\n  showToastr() {\n    toastr.success('Have fun storming the castle!', 'Miracle Max Says')\n  }\n  ..\n}\n\n```\n同样我们在`/src/store/configureStore.js`中使用`__BROWSER__`和`__DEV__`两个变量来决定只有在开发环境和浏览器环境下需要挂载`Redux Dev Tools Extension`， 别忘了configureStore作为redux的store配置组件，同样是需要运行在服务器端的\n\n\n## 分析 webpack stats\n构建完成之后就结束了吗？没有，我们集成了bundle文件分析工具，试着在控制台下敲入下面3条命令。你会喜欢的。\n\n```shell\n$ npm run analyse:client\n```\n\n```shell\n$ npm run analyse:server\n```\n\n```shell\n$ npm run analyse\n```\n\n## Browsersync\n打开[http://localhost:3001](http://localhost:3001)可配置[Browsersync](https://browsersync.io/docs)\n\n## 更新源码\n```shell\n$ git checkout master\n$ git pull origin master\n$ npm install\n```\n\n## 目录说明\n```\n.\n├── /build/                         # dist目录\n├── /public/                        # 存放静态资源(favicon.ico, robots.txt等，图片不需要放这里)\n├── /src/                           # 源码目录\n│   ├── /actions/                   # 存放redux actions\n│   ├── /components                 # 系统级组件   \n│   ├── /configs/                   # 前端运行配置文件，不同环境配置文件单独存放\n│   ├── /constants/                 # 存放redux action常量\n│   ├── /core/                      # 系统基础库\n│   ├── /reducers/                  # 存放redux reducers\n│   ├── /routes/                    # 路由\u0026页面，需要补脑的走这里https://github.com/ReactTraining/react-router/tree/v3/examples/huge-apps\n│   │   ├── /home/                  # route home\n│   │   │   ├──/images/             # 页面级图片资源\n│   │   │   ├──/components/         # components\n│   │   │   ├──/containers/         # containers\n│   │   │   ├──/xxx.scss(less)      # 页面级样式\n│   │   │   └──/index.js            # 动态路由配置文件\n│   │   ├── /xxxx/                  # route xxxx\n│   │   │   ├──/components/         # components\n│   │   │   ├──/containers/         # containers\n│   │   │   └──/index.js            # 动态路由配置文件\n│   │   └── /index.js               # 动态路由配置文件\n│   └── /server.js                  # 服务端入口\n│   ├── /server/                    # 存放只运行在服务端的代码，例如:RESTful API\n│   ├── /store/                     # Redux store\n│   ├── /styles/                    # 全局样式\n│   ├── /client.js                  # 前端入口js\n│   └── /server.js                  # 服务端入口\n├── /tools/                         # 构建相关\n│   ├── /analyse/                   # webpack stats分析工具\n│   ├── /dev-tools/                 # 开发者工具\n│   ├── /libs/                      # 构建相关的辅助库\n│   ├── /loaders/                   # 自定义webpack loader\n│   ├── /webpacks/                  # webpack相关配置\n│   ├── /build-client.js            # 客户端构建脚本\n│   ├── /build-server.js            # 服务端构建脚本\n│   ├── /build.js                   # 统一构建脚本\n│   ├── /clean.js                   # 清理脚本\n│   ├── /config.js                  # 构建配置参数\n│   ├── /copy.js                    # 复制静态资源、复制构建资源等\n│   ├── /postcss.config.js          # postcss-loader配置\n│   ├── /run.js                     # 执行任务脚本\n│   ├── /start.js                   # 启动开发脚本\n│   └── /watch.js                   # watch \u0026 copy\n├── settings.js                     # dist目录，服务器端口设置\n└── package.json                    # The list of 3rd party libraries and utilities\n```\n---\n\n## 外围环境配置\n- Web Storm 关闭 \"safe write\" , File -\u003e Appearance \u0026 Behavior -\u003e System Settings, 取消选中 \"Use safe write (save changes to a temporary file first)\"  \n- 安装 [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?utm_source=chrome-app-launcher-info-dialog)\n- 安装 [Redux Dev Tools Extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?utm_source=chrome-app-launcher-info-dialog)\n\n    NOTE: `tools/dev-tools/chrome` 包含以上两个开发工具的安装包，用chrome打开即可安装\n\n## 不喜欢React？ 没关系，看看基于Marko和Vue版的同构脚手架\n- [isomorphic-marko](https://github.com/wujjpp/isomorphic-marko) NOTE: 服务端的渲染速度相对于React、Vue来说，[Marko](https://github.com/marko-js/marko)还是非常乐观的。\n\n- [isomorphic-vue](https://github.com/wujjpp/isomorphic-vue)\n\n\n\nMade with ♥ by Wu Jian Ping\n\nFeel free to contact me if you have any problem [830390@qq.com](mailto:830390@qq.com)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwujjpp%2Fisomorphic-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwujjpp%2Fisomorphic-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwujjpp%2Fisomorphic-react/lists"}