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

自制的 React 同构脚手架

技术React创建于2018/03/04584次阅读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配置项
6条评论

我是来学习的。

回复

互相学习哈

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
回复

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

2018/03/131 人赞
回复

6666666666

回复
吴世剑
小度鱼作者,野生设计师,野生程序员。
关注私信
348
关注
143
粉丝
204
帖子