Git Product home page Git Product logo

react_home's Introduction

Anurag's github stats

react_home

这是一个react的脚手架项目,其中包含着当前最新得脚手架配置方式,技术技术栈包括react16+antd+margaret+hook+webpack4+sass/less+axios,我会长期,并定期维护这个脚手架,将当下react生态圈最新技术运用进去,适用于新手或者关注进阶的朋友学习参考。(广大撸友觉得能用上的,也不要吝啬自己的star哦)

脚手架工具

地址: https://github.com/aiyuekuang/ztao.git(具体用法可直接看该工具的README.md)

本项目的宗旨

更快、更新、更好用、更简单

react_home和react_home_admin

react_home:适合开发各类前台项目或移动端项目 react_home_admin:适合开发各类中后台项目,请移步react_home_admin react_home_base:之前的react-router版本,请移步react_home_base

更新日志

2020.07.09 日志地址

  1. 加入格式化规范prettier,webstorm和vscode用法自行百度,好处就是多人协作时,不会因为格式而导致git文件冲突
  2. 优化css打包
  3. 优化打包后目录规范

功能与特色

  1. react_home_admin项目集成了当前react中最好得ui轮子antd,不解释,已配置好,直接使用
  2. 项目具备了本地开发和打包上线得3个不同状态得场景,在开发状态,本地服务已配置了http-proxy,方便用户跨域调用后端开发得接口,并且本地调试阶段用得是根目录下得index.html,打包上线得时候部署到服务器得是加过hash得index.html这样就避免了测试人员总是无法刷新出新得界面得问题
  3. 项目集成了sass和less这2种样式开发,方便2个阵营得都能愉快使用
  4. 测试环境接口地址代理,只需要在config/common的api字段里进行修改即可,如果有特殊需求,可行进行webpack的配置。
  5. 项目将原来的redux切换为mobx,因为长时间使用redux我发现,实际开发中,完全没必要使用redux,每个页面的数据和页面逻辑在当前页面内完成是最佳的实践,这样更直观,并且让后来的改代码的小伙伴很容易理解,也很容易排错,试想一个数据在各个地方使用,出现问题,是不是很头疼?所以我这样做,并且在实际的应用中,确实是有这样的效果
  6. 本项目使用得axios来作为ajax,有简单得库在utils中的fetchData
  7. 本项目引入了esn得库,一个很小巧得数据操作库,在开发过程中,里面得很多功能都能用到,2个字方便
  8. 本项目没有尝试服务器端渲染,笔者认为,spa最大得特色就是使得前后端得开发模式发生了变化,让整个开发流程变得舒服,前端人员开发出来得代码可以随意得部署在任何地方,而不需要考虑服务器上得问题,而首屏加载过慢得问题可以通过gzip来解决,我想这能满足大多数人得需求,当然了,项目有特殊性,还是有很多项目需要用到服务端渲染,这可以加强研究
  9. 本项目有简单的脚手架工具ztao-cli,可以直接只用,更加方便快捷

项目结构

  1. config:用于配置各种变量,有webpack中用到的,也有项目中用到的,比如"img_add_url"这个字段就是图片上传的前缀,用于图片上传后,后台没有返回完整的图片url,只返回图片的名称后缀时,在前面加上地址的作用
  2. dll:在package的script里面有dll,用于提前打包我们常用的库的一个工具,加快我们的编译时间的
  3. dist:打包后的代码
  4. src/utils:用于开发主管放置公共函数的地方
  5. src/work:开发组员用于开发业务的地方(page:每个页面都放在这里面,router:路由的数据结构都在这里,server:所有的ajax请求都写在这里,方便后续复用,components用于存放复用组件的地方,images存放图片,图片可以在页面直接import引用,common是用于存放业务中公共的函数的与业务紧密结合的这种)
  6. .eslintrc.js是eslint的配置文件
  7. webpack.config.babel.js是webpack的配置文件,支持es6写法
  8. webpack.dll.config.js是用于打包dll的配置文件,你也可以将库打包进去,加快整个项目的编译时间

项目适用对象

  1. 团队式协作:由一个主管负责项目的整体环境,src/work以外各个文件的维护,比如config,webpack,mock,utils之类的,团队成员负责项目的业务部分src/work不需要关注此以外的部分,有任何问题可以咨询主管
  2. 适用项目:适用于antd pro项目之外的所有项目,和嫌antd pro过于庞大的项目,简单说就是,不想用antd pro的,都可以用这个开发项目
  3. 后续:本项目是一个架构基础,旨在更简单的让所有用户在项目架构阶段,简化工作,并且让所有团队成员更快的熟悉这个架构,将更多的精力放在分析需求和代码实现上,本人有一揽子的从需求发起到项目上线的流程优化系统,将在后续的博客中一一分享,同时也会有各类配套工具的分享

使用方法(建议使用yarn,尽量不要用cnpm):

安装模块:npm install  

开发模式:npm start  

打包:npm run build

访问地址:http://localhost:3016

注意以及搭建环境时问题汇总

  1. 如果在build或者start的时候出现node-sass之类的报错,可以使用 npm rebuild node-sass来处理下,再build或start,也可以参考地址

打包上线

  • 在项目开始之前,在config文件夹中,配置你的项目的各种环境,这些环境都是项目在开发和上线时都需要用到的
  • 打包后直接将build文件夹提交至你们项目得根目录中
  • 命令并且呵斥你们得后端人员,将404指向build/index.html,这样基本就可以愉快得查看了
  • 如果在上线后首屏调用速度较慢,这样得情况得话,可以鞭挞后端人员,开启服务器得gzip压缩功能将js压缩一下,压缩后大小基本只有原来得三分之一,这个很实用
  • 还有自己打包代码发布到nginx的方法:地址

希望

  • 本项目是根据react社区一些朋友分享得脚手架综合,并且实际项目运用后所得出得经验
  • 朋友们如果有一些对本项目得建议,或者想法欢迎issues,将持续改进

联系我们

QQ交流反馈群号:873937696

react_home's People

Contributors

aiyuekuang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react_home's Issues

node-sass版本过低

node-sass项目中用的是4.7.2,在项目npm install的时候显示连接不存在,翻墙发现也不行,后来将node-sass设置为4.10.0以上版本可行;
"node-sass": "^4.10.0",

antd按需加载无效

请问怎么处理splitChunks默认把antd全部打包造成的文件过大的情况的?

部署上线白屏

为什么我部署到tomcat8.0的时候,先是首屏加载,然后加载完了之后就白屏了,我看console也没有报错,这是什么原因啊?

yarn 出错

warning "antd > [email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.1".
warning "antd > [email protected]" has incorrect peer dependency "react-dom@^0.14.0 || ^15.0.1".
warning "antd > react-slick > [email protected]" has unmet peer dependency "jquery@>=1.8.0".
warning " > [email protected]" has unmet peer dependency "apollo-client@^2.2.3".

然后项目
yarn run start
项目报错

ERROR in ./node_modules/antd/es/alert/style/index.less
Module build failed: ModuleBuildError: Module build failed:

/* stylelint-disable declaration-bang-space-before */
^
Cannot read property 'length' of undefined
in C:\Users\JackMa\Desktop\demo\react_home\node_modules\antd\es\style\color\bezierEasing.less (line 1, column -1)
at runLoaders (C:\Users\JackMa\Desktop\demo\react_home\node_modules\webpack\lib\NormalModule.js:252:20)
at C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at context.callback (C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at
@ ./node_modules/antd/es/alert/style/index.js 2:0-22
@ ./src/components/zhuye/index.js
@ ./src/routes.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:3012 webpack/hot/dev-server babel-polyfill ./src/index.js

ERROR in ./node_modules/antd/es/style/index.less
Module build failed: ModuleBuildError: Module build failed:

/* stylelint-disable declaration-bang-space-before */
^
Cannot read property 'length' of undefined
in C:\Users\JackMa\Desktop\demo\react_home\node_modules\antd\es\style\color\bezierEasing.less (line 1, column -1)
at runLoaders (C:\Users\JackMa\Desktop\demo\react_home\node_modules\webpack\lib\NormalModule.js:252:20)
at C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at context.callback (C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at
@ ./node_modules/antd/es/input/style/index.js 1:0-32
@ ./src/components/zhuye/index.js
@ ./src/routes.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:3012 webpack/hot/dev-server babel-polyfill ./src/index.js

ERROR in ./node_modules/antd/es/input/style/index.less
Module build failed: ModuleBuildError: Module build failed:

/* stylelint-disable declaration-bang-space-before */
^
Cannot read property 'length' of undefined
in C:\Users\JackMa\Desktop\demo\react_home\node_modules\antd\es\style\color\bezierEasing.less (line 1, column -1)
at runLoaders (C:\Users\JackMa\Desktop\demo\react_home\node_modules\webpack\lib\NormalModule.js:252:20)
at C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at context.callback (C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at
@ ./node_modules/antd/es/input/style/index.js 2:0-22
@ ./src/components/zhuye/index.js
@ ./src/routes.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:3012 webpack/hot/dev-server babel-polyfill ./src/index.js

ERROR in ./node_modules/antd/es/notification/style/index.less
Module build failed: ModuleBuildError: Module build failed:

/* stylelint-disable declaration-bang-space-before */
^
Cannot read property 'length' of undefined
in C:\Users\JackMa\Desktop\demo\react_home\node_modules\antd\es\style\color\bezierEasing.less (line 1, column -1)
at runLoaders (C:\Users\JackMa\Desktop\demo\react_home\node_modules\webpack\lib\NormalModule.js:252:20)
at C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at context.callback (C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at
@ ./node_modules/antd/es/notification/style/index.js 2:0-22
@ ./src/actions/index.js
@ ./src/components/zhuye/index.js
@ ./src/routes.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:3012 webpack/hot/dev-server babel-polyfill ./src/index.js

ERROR in ./src/style/ztao.scss
Module build failed: ModuleBuildError: Module build failed: Error: Missing binding C:\Users\JackMa\Desktop\demo\react_home\node_modules\node-sass\vendor\win32-x64-57\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 8.x

Found bindings for the following environments:

  • Windows 64-bit with Node.js 8.x

This usually happens because your environment has changed since running npm install.
Run npm rebuild node-sass --force to build the binding for your current environment.
at module.exports (C:\Users\JackMa\Desktop\demo\react_home\node_modules\node-sass\lib\binding.js:15:13)
at Object. (C:\Users\JackMa\Desktop\demo\react_home\node_modules\node-sass\lib\index.js:14:35)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object. (C:\Users\JackMa\Desktop\demo\react_home\node_modules\sass-loader\lib\loader.js:3:14)
at runLoaders (C:\Users\JackMa\Desktop\demo\react_home\node_modules\webpack\lib\NormalModule.js:252:20)
at C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:170:18
at loadLoader (C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\loadLoader.js:27:11)
at iteratePitchingLoaders (C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at iteratePitchingLoaders (C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
at C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:173:18
at loadLoader (C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\loadLoader.js:36:3)
at iteratePitchingLoaders (C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at runLoaders (C:\Users\JackMa\Desktop\demo\react_home\node_modules\loader-runner\lib\LoaderRunner.js:362:2)
@ ./src/index.js 21:0-28
@ multi (webpack)-dev-server/client?http://localhost:3012 webpack/hot/dev-server babel-polyfill ./src/index.js
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/sass-loader/lib/loader.js!src/style/ztao.scss:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/index.js??ref--5-1!./node_modules/sass-loader/lib/loader.js!./src/style/ztao.scss] ./node_modules/css-loader??ref--5-1!./node_modules/sass-loader/lib/loader.js!./src/style/ztao.scss 1.18 KiB {mini-css-extract-plugin} [built] [failed] [1 error]

ERROR in ./src/style/ztao.scss (./node_modules/css-loader??ref--5-1!./node_modules/sass-loader/lib/loader.js!./src/style/ztao.scss)
Module build failed: Error: Missing binding C:\Users\JackMa\Desktop\demo\react_home\node_modules\node-sass\vendor\win32-x64-57\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 8.x

Found bindings for the following environments:
  - Windows 64-bit with Node.js 8.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass --force` to build the binding for your current environment.
    at module.exports (C:\Users\JackMa\Desktop\demo\react_home\node_modules\node-sass\lib\binding.js:15:13)
    at Object.<anonymous> (C:\Users\JackMa\Desktop\demo\react_home\node_modules\node-sass\lib\index.js:14:35)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\JackMa\Desktop\demo\react_home\node_modules\sass-loader\lib\loader.js:3:14)

Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--6-1!node_modules/less-loader/dist/cjs.js??ref--6-2!node_modules/antd/es/alert/style/index.less:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/index.js??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/antd/es/alert/style/index.less] ./node_modules/css-loader??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/antd/es/alert/style/index.less 287 bytes {mini-css-extract-plugin} [built] [failed] [1 error]

ERROR in ./node_modules/antd/es/alert/style/index.less (./node_modules/css-loader??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/antd/es/alert/style/index.less)
Module build failed:

/* stylelint-disable declaration-bang-space-before */
^
Cannot read property 'length' of undefined
      in C:\Users\JackMa\Desktop\demo\react_home\node_modules\antd\es\style\color\bezierEasing.less (line 1, column -1)

Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--6-1!node_modules/less-loader/dist/cjs.js??ref--6-2!node_modules/antd/es/input/style/index.less:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/index.js??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/antd/es/input/style/index.less] ./node_modules/css-loader??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/antd/es/input/style/index.less 287 bytes {mini-css-extract-plugin} [built] [failed] [1 error]

ERROR in ./node_modules/antd/es/input/style/index.less (./node_modules/css-loader??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/antd/es/input/style/index.less)
Module build failed:

/* stylelint-disable declaration-bang-space-before */
^
Cannot read property 'length' of undefined
      in C:\Users\JackMa\Desktop\demo\react_home\node_modules\antd\es\style\color\bezierEasing.less (line 1, column -1)

Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--6-1!node_modules/less-loader/dist/cjs.js??ref--6-2!node_modules/antd/es/notification/style/index.less:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/index.js??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/antd/es/notification/style/index.less] ./node_modules/css-loader??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/antd/es/notification/style/index.less 287 bytes {mini-css-extract-plugin} [built] [failed] [1 error]

ERROR in ./node_modules/antd/es/notification/style/index.less (./node_modules/css-loader??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/antd/es/notification/style/index.less)
Module build failed:

/* stylelint-disable declaration-bang-space-before */
^
Cannot read property 'length' of undefined
      in C:\Users\JackMa\Desktop\demo\react_home\node_modules\antd\es\style\color\bezierEasing.less (line 1, column -1)

Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--6-1!node_modules/less-loader/dist/cjs.js??ref--6-2!node_modules/antd/es/style/index.less:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/index.js??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/antd/es/style/index.less] ./node_modules/css-loader??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/antd/es/style/index.less 287 bytes {mini-css-extract-plugin} [built] [failed] [1 error]

ERROR in ./node_modules/antd/es/style/index.less (./node_modules/css-loader??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/antd/es/style/index.less)
Module build failed:

/* stylelint-disable declaration-bang-space-before */
^
Cannot read property 'length' of undefined
      in C:\Users\JackMa\Desktop\demo\react_home\node_modules\antd\es\style\color\bezierEasing.less (line 1, column -1)

脚手架之前用 redux 时候的一些问题。

就是想请教一下,
您这个脚手架之前用 redux 做 state 管理的时候,
一旦我有个组件要用 store 的 state 或 action 的时候,我就要把相关的 state 和 action 引入、bindActionCreators,然后在 export 的时候 去connect 。例子:
`const mapStateToProps = state => ({
publicState: state.public
});

const mapDispatchToProps = dispatch => ({
publicActions: bindActionCreators(publicActions, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(Component);`

觉得很繁琐,有没有一个办法,在初始化页面的时候就全部声明好,存到一个静态的地方Global,然后用的时候只要用Global就可以了,的方法。
我按照上面试了下,发现能拿到,但是会使 react-router 失效。感觉进入了死胡同。

谢谢。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.