注册账号登录
吴世剑
小度鱼作者，野生设计师，野生程序员。
关注

自制的 React 同构脚手架

技术›React创建于2018/03/04829次阅读2人收藏

Web前端世界日新月异变化太快，为了让自己跟上节奏不掉队，总结出了自己的一套React脚手架，方便日后新项目可以基于此快速上手开发。

Github: https://github.com/54sword/react-starter

特点
  • 💻 服务端渲染，完美解决SEO问题
  • ✂️ 按页面将代码分片，然后按需加载
  • 🍵 支持 CSS Modules，避免CSS全局污染
  • 🎨 支持流行UI框架 Bootstrap 4
  • 🚀 开发环境支持热更新
  • 🐂 内置登录、退出、页面权限控制、帖子列表获取、帖子详情获取等功能
  • ❌ 内置用户访问页面时，301、404 状态相应的处理逻辑

开始

没有在windows机器上测试过，可能会报错

$ git clone git@github.com:54sword/react-starter.git
$ cd react-starter
$ npm install
$ npm run dev

浏览器打开 http://localhost:4000

相关命令说明

开发环境

注意：开发环境下，代码不分片，生产环境下才会分片

npm run dev

生产环境测试

npm run dist
npm run server

部署到服务器

1、修改 config/index.js 中的 public_path 配置

2、打包文件，除了index.ejs是服务端渲染的模版文件，其他都是客户端使用的文件

npm run dist

3、将项目上传至你的服务器

4、启动服务

Node 启动服务

NODE_ENV=production __NODE__=true BABEL_ENV=server node src/server

或使用 pm2 启动服务

NODE_ENV=production __NODE__=true BABEL_ENV=server pm2 start src/server --name "react-starter" --max-memory-restart 400M

目录结构
.
├── config                              # 项目配置文件
├── dist                                # 所有打包文件储存在这里
├── src                                 # 程序源文件
│   ├── actions                         # redux actions
│   ├── client                          # 客户端入口
│   ├── common                          # 全局可复用的容器组件
│   ├── components                      # 全局可复用的容器组件
│   ├── pages                           # 页面组件
│   ├── reducers                        # redux reducers
│   ├── router                          # 路由配置
│   ├── server                          # 服务端入口
│   ├── store                           # redux store
│   └── view                            # html模版文件
├── .babelrc                            # 程序源文件
├── webpack.development.config.js       # 开发环境的webpack配置项
└── webpack.profuction.config.js        # 生产环境的wbepakc配置项
有4人点赞
复制连接微信微博QQ空间QQ好友和群组TwitterFacebook
6条评论

我是来学习的。

2018/03/05
赞回复

互相学习哈

2018/03/05
赞回复

话说，这个站是干啥的

2018/03/05
赞回复

一个网络社区，我也不知道主要干什么，随其自然生长吧。以后会改成什么样我...我现在也不知道。

目前主要是分享了一些，自己在实现该网站时候的一些技术和代码。

2018/03/051 人赞
赞回复

是team在维护，还是您一个人在维护

2018/03/05
赞回复

我的个人项目，业余时间开发维护。

2018/03/05
赞回复

那是大神了。我web的就研究过php和java，nodejs的没看过，希望从这里能入门点

2018/03/05
赞回复

入门学习本站资源不多，不过本站源码都开放了，实现某些功能的时候，可以给你做一个参考哈。

2018/03/05
赞回复

谢谢站长无私奉献，抽空多读读肯定有帮助。

2018/03/051 人赞
赞回复

牛逼 这个网站也是ssr吗

2018/03/08
赞回复

是的

2018/03/08
赞回复

React Native 啥时候也弄个脚手架出来

2018/05/19
赞回复

暂时还没有计划做哈

2018/05/19
赞回复

等你有时间。

2018/05/19
赞回复
/mnt/e/group/react-starter/node_modules/webpack-dev-middleware/lib/context.js:95
  context.compiler.hooks.invalid.tap('WebpackDevMiddleware', invalid);
                         ^

TypeError: Cannot read property 'invalid' of undefined
    at ctx (/mnt/e/group/react-starter/node_modules/webpack-dev-middleware/lib/context.js:95:26)
    at wdm (/mnt/e/group/react-starter/node_modules/webpack-dev-middleware/index.js:44:19)
    at exports.default (/mnt/e/group/react-starter/src/server/webpack-hot-middleware.js:9:11)
    at Object.<anonymous> (/mnt/e/group/react-starter/src/server/server.js:34:45)
    at Module._compile (module.js:660:30)
    at loader (/mnt/e/group/react-starter/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/mnt/e/group/react-starter/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/mnt/e/group/react-starter/src/server/index.js:11:1)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-starter@1.0.0 dev: `NODE_ENV=development __NODE__=false BABEL_ENV=server webpack --progress --colors --config webpack.development.config.js && NODE_ENV=development __NODE__=true BABEL_ENV=server node src/server `
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-starter@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-03-13T07_12_09_101Z-debug.log

报错了，没跑起来

npm run dev

node v9.4.0
2018/03/13
赞回复

webpack版本是多少？

2018/03/13
赞回复

v3.11.0

比package.josn 高一点，里面的是3.10.0

2018/03/13
赞回复

0 info it worked if it ends with ok

1 verbose cli [ '/root/nodejs/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]

2 info using npm@5.6.0

3 info using node@v9.4.0

4 verbose run-script [ 'predev', 'dev', 'postdev' ]

5 info lifecycle react-starter@1.0.0~predev: react-starter@1.0.0

6 info lifecycle react-starter@1.0.0~dev: react-starter@1.0.0

7 verbose lifecycle react-starter@1.0.0~dev: unsafe-perm in lifecycle true

8 verbose lifecycle react-starter@1.0.0~dev: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/mnt/e/group/react-starter/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/mnt/c/ProgramData/Oracle/Java/javapath_target_2337506765:/mnt/c/Python27:/mnt/c/Python27/Scripts:/mnt/c/Windows/System32:/mnt/c/Windows:/mnt/c/Windows/System32/wbem:/mnt/c/Windows/System32/WindowsPowerShell/v1.0:/mnt/c/dev/nvm:/mnt/c/dev/nvm/v6.11.0:/mnt/c/Program Files/Microsoft VS Code/bin:/mnt/c/Users/admin/AppData/Roaming/npm:/mnt/c/Windows/System32:/mnt/c/Windows:/mnt/c/Windows/System32/wbem:/mnt/c/Windows/System32/WindowsPowerShell/v1.0:/mnt/c/Program Files/Git/cmd:/mnt/c/Program Files/nodejs:/mnt/c/ProgramData/chocolatey/bin:/mnt/c/Program Files (x86)/Microsoft Emulator Manager/1.0:/mnt/c/Users/admin/.nvmw:/mnt/c/Users/admin/AppData/Local/Microsoft/WindowsApps

9 verbose lifecycle react-starter@1.0.0~dev: CWD: /mnt/e/group/react-starter

10 silly lifecycle react-starter@1.0.0~dev: Args: [ '-c',

10 silly lifecycle 'NODE_ENV=development __NODE__=false BABEL_ENV=server webpack --progress --colors --config webpack.development.config.js && NODE_ENV=development __NODE__=true BABEL_ENV=server node src/server ' ]

11 silly lifecycle react-starter@1.0.0~dev: Returned: code: 1 signal: null

12 info lifecycle react-starter@1.0.0~dev: Failed to exec dev script

13 verbose stack Error: react-starter@1.0.0 dev: `NODE_ENV=development __NODE__=false BABEL_ENV=server webpack --progress --colors --config webpack.development.config.js && NODE_ENV=development __NODE__=true BABEL_ENV=server node src/server `

13 verbose stack Exit status 1

13 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)

13 verbose stack at EventEmitter.emit (events.js:160:13)

13 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)

13 verbose stack at ChildProcess.emit (events.js:160:13)

13 verbose stack at maybeClose (internal/child_process.js:943:16)

13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)

14 verbose pkgid react-starter@1.0.0

15 verbose cwd /mnt/e/group/react-starter

16 verbose Linux 4.4.0-43-Microsoft

17 verbose argv "/root/nodejs/bin/node" "/usr/local/bin/npm" "run" "dev"

18 verbose node v9.4.0

19 verbose npm v5.6.0

20 error code ELIFECYCLE

21 error errno 1

22 error react-starter@1.0.0 dev: `NODE_ENV=development __NODE__=false BABEL_ENV=server webpack --progress --colors --config webpack.development.config.js && NODE_ENV=development __NODE__=true BABEL_ENV=server node src/server `

22 error Exit status 1

23 error Failed at the react-starter@1.0.0 dev script.

23 error This is probably not a problem with npm. There is likely additional logging output above.

24 verbose exit [ 1, true ]

报错日志

2018/03/13
赞回复

楼下有报错日志

2018/03/13
赞回复

不知道和系统有没有关系，我是windows系统，在商店里面装了ubuntu uwp版，windows 系统就更运行不起来了。直接很多不支持。

2018/03/13
赞回复

windows环境我没有测试过，估计是会有很多问题。

主要是我没有windows的电脑...

刚刚我使用webpack 3.11.0，也是正常运行，

从错误上看，是webpack-dev-middleware依赖这里有问题。

2018/03/13
赞回复

估计还是windows的锅。公司电脑没给配MAC.只有WINDOWS.苦逼。

2018/03/13
赞回复

额...Windows环境我现在无能为力，没有调试环境，调试不了。

2018/03/13
赞回复

嗯，没同，先不管他了。谢谢。

2018/03/13
赞回复

建议用蚂蚁金服的dva吧，可以简化很多原生redux的操作，条理也更清晰

2018/03/131 人赞
赞回复

6666666666

2018/06/01
赞回复
吴世剑
小度鱼作者，野生设计师，野生程序员。
关注私信
393
关注
214
粉丝
222
帖子