node package manager

steamer-react-isomorphic

React Isomorphic Starter Kot

此分支是react同构的快速启动分支。 react web分支: react分支

文章参考

腾讯新闻React同构直出优化实践

web开发

命令环境

package.json中的scripts,若是Windows,设置环境请用set,若是Mac,设置环境请使用export,如:

  • Mac => export NODE_ENV=__DEV__
  • Window => set NODE_ENV=__DEV__ 目前在package.json里多添加了一个win-scripts项目方便直接修改成scripts使用

开发环境

  • react文件夹下启动:npm run dev
  • react文件夹下启动: npm start

腾讯新闻主页:

  • localhost:9000/index.html
  • localhost:9000/news/index.html (webpack.server.js里映射路径到news)

腾讯新闻spa页:

  • localhost:9000/spa.html
  • localhost:9000/news/spa.html

生产环境

  • react文件夹下启动: npm run pub
  • react文件夹下启动: npm start

代理配置

Charles:

Map Local:

  • localhost:9000 => /react/pub/ 匹配本地html资源
  • localhost:8000 => /react/pub/ 匹配本地除cdn资源

Map Remote:

  • localhost:9000/api/* => localhost:3000/api/

Fiddler:

Rule

rule: regex:^https?:\/\/localhost:9000\/(.*)$ \local path\pub\$1 regex:^https?:\/\/localhost:8000\/(.*)$ \local path\pub\$1

直出

建议全局安装node-dev

node-dev用于后台服务启动,具体命令写在pacakge.jsonscripts

开发环境

  • react文件夹下启动: npm run dev-node => 后台服务相关
  • react文件夹下启动: npm run dev-node-static => cdn资源
  • recat文件夹下启动: npm run start
  • react直出后台逻辑主要在react/node/asset/index.js中,生成文件在react/pub/node/app.js cdn资源生成react/dist/中。
  • 列表页、详情页、留言页都可以以spa或者直出的形式访问

腾讯新闻spa页:

  • http://localhost:3001/spa

代理配置

Charles:

Map Local

  • localhost:3001 => /react/dist/ 匹配本地除html资源
  • localhost:9000/*.js => /react/dist 匹配本地除cdn资源

Fiddler:

Rule

rule: regex:^https?:\/\/localhost:3001\/(.*[.js|.css])$ \local path\dist\$1

生产环境

  • react文件夹下启动: npm run pub-node
  • react文件夹下启动: npm run start
  • 生成内容都在react/pub/
  • 列表页、详情页、留言页都可以以spa或者直出的形式访问

代理配置

Charles:

Map Local:

  • localhost:8000 => /react/pub/ 匹配本地除cdn资源

Map Remote:

  • localhost:9000/api/* => localhost:3000/api/

Fiddler:

Rule

rule: regex:^https?:\/\/localhost:8000\/(.*)$ \local path\pub\$1

端口占用

  • 9000 webpack开发时占用,用于hot reload,以及做proxy,可指向服务端
  • 3001 koa服务器端占用

多个页面的开发

添加html到src/目录下就可以了,现在steamer-react会自动识别

Devtools

  • ctrl+h进行切换
  • ctrl+q切换位置

其它命令可以参考src/page/common/DevTools。可以调defaultSize设置自己喜欢的大小。目前默认设置在底部,占30%的屏幕大小。

文件目录

  • 单页面文件可参考 src/page/index
  • 单页应用可参考 src/page/spa

合图代码

请统一放在 src/page/xxx/container/xxx.scss中,可参考src/page/index里面的做法。 这里的问题囿于插件局限性,之后建议找更好的插件,或者我们自己写一个。

目前构建已经支持多个合图。只需要在src/img/sprites/下面新建文件夹,然后放在需要合的图,就会自动在src/css/文件夹下生成sprites/文件夹,里面包含了对应的合图和scss。

Windows下node-sass的安装

在node版本大于或等于4.0的环境下,调用npm rebuild node-sass 时会自动安装“node-gyp”模块。window下的“node-gyp”模块需要以下配置:

更多使用办法