[email protected][email protected] 项目模板,支持按需加载
推荐直接使用脚手架生成 dawdler
如需使用 TypeScript, 请使用 typescript
分支
Have Fun !
文件目录 参考 之前公司架构师
seth
大牛
git clone https://github.com/lijinke666/react-project-template.git
npm install or yarn
npm start
访问(自动打开) http://localhost:8080/
- 开始
npm start
- 启动开发服务器
npm run dev
- 打包
npm run build
- 升级所有包
npm run upgrade
- 代码风格检查
npm run lint
- 测试
npm run test
- 覆盖率
npm run ci
- react@16
- webpack@4
- babel@7
- connected-react-router@4
- react-router-dom@4
- react-router@4
- react-redux@5
- antd@3
- docker
由于使用的babel7 为了保持兼容 安装了一个
yarn add --dev [email protected] @babel/core babel-jest
请选择桥接模式(bridge) [email protected]
否则 npm run test
可能出现以下报错
Requires Babel "^7.0.0-0", but was loaded with "6.26.0". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.
https://github.com/babel/babel-bridge
基于 axios 封装
import request from "libs/request"
request.get()
request.post()
request.put()
request.delete()
错误边界
import ErrorBoundary from "shared/components/ErrorBoundary"
@ErrorBoundary
export default class App extends React.PureComponent{
...
}
1200px 包裹容器
import Container from "shared/components/Container";
export default class App extends React.PureComponent {
render() {
return(<Container>xxxx</Container>);
}
}
├── Dockerfile
├── LICENSE
├── README.md
├── __tests__
│ ├── __mocks__
│ │ ├── fileMock.js
│ │ └── styleMock.js
│ ├── setup.js
│ └── tests
│ ├── __snapshots__
│ │ └── components.test.js.snap
│ └── components.test.js
├── config
│ ├── development.config.js
│ ├── http.config.js
│ ├── index.js
│ └── production.config.js
├── deploy
│ ├── app.conf
│ └── nginx.conf
├── dist
│ ├── css
│ │ ├── app.a759184c.css
│ │ └── runtime.99a9ba82.css
│ ├── images
│ │ └── logo8501194e.png
│ ├── index.html
│ ├── js
│ │ ├── 5.e1db4215.js
│ │ ├── app.a759184c.js
│ │ ├── home.026a90d5.js
│ │ ├── runtime.99a9ba82.js
│ │ ├── testPage.8d9b912c.js
│ │ └── vendors.1fe3c3e5.js
│ └── vendor.b740a114.js
├── logo.png
├── package.json
├── postcss.config.js
├── rest-mock
│ └── dawdler.json
├── src
│ ├── Home
│ │ ├── index.js
│ │ └── styles.less
│ ├── app
│ │ ├── components
│ │ │ └── NotFound
│ │ │ ├── index.js
│ │ │ └── styles.less
│ │ ├── index.js
│ │ ├── styles.less
│ ├── icons.js
│ ├── index.html
│ ├── index.js
│ ├── polyfills.js
│ ├── shared
│ │ ├── components
│ │ │ ├── Container
│ │ │ │ ├── index.js
│ │ │ │ └── index.less
│ │ │ └── ErrorBoundary
│ │ │ └── index.js
│ │ ├── libs
│ │ │ ├── component.js
│ │ │ ├── history.js
│ │ │ ├── request.js
│ │ │ └── routes.js
│ │ └── styles
│ │ ├── fonts.less
│ │ ├── mixin.less
│ │ └── vars.less
│ └── style.less
├── webpack.config.js
└── yarn.lock