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

自制的 React 同构脚手架

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配置项
6条评论

我是来学习的。

互相学习哈

2018年03月05日
回复

话说,这个站是干啥的

2018年03月05日
回复

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

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

2018年03月05日1 人赞
回复

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

2018年03月05日
回复

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

2018年03月05日
回复

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

2018年03月05日
回复

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

2018年03月05日
回复

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

2018年03月05日1 人赞
回复

牛逼 这个网站也是ssr吗

是的

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

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的操作,条理也更清晰

回复

6666666666

吴世剑
小度鱼作者,野生设计师,野生程序员。
关注私信
308
关注
107
粉丝
158
帖子