本工程基于实际项目简化而来,已去除相关业务代码与公司内部服务相关的配置或改写,如:
- 源项目的dll是使用公司内网的webpack dll云打包服务,由于改造成本过高,故去除
- 又拍云配置以及上传静态资源的代码从私有源迁移至项目中
- 省略配置文件的拉取过程,
server.config.js以及upyun.config.js会与环境不同而不同,这里仅做演示,实际项目应由配置中心管理,早项目部署时或运行时根据适当的策略去拉取。
推荐使用vscode进行开发,理由:
- scopde CSS方案使用的是 styled-jsx, vscode上有相应的插件支持 vscode-styled-jsx.
- vscode对tslint支持较友好(webstorm也还不错)
npm install
npm start
- 所有文件名统一小写,间隔符使用
- - 所有react组件类名大写开头
别名的目的是减少书写繁琐度。
本工程支持以client开头的别名,这一个已足够使用,比如components:
import Component from 'client/components/Component'其他如assets, pages, utils等client下的目录都可同理引入。
在pages目录下新建一个目录,代表一个顶级页面,新建routes.tsx, 用于配置当前路由的所有子路由。
页面级组件命名为container.tsx,如果还有子路由,与container.tsx同级再新建一个目录。
本工程已支持异步路由,比如index的路由:
import * as React from 'react';
import { Route } from 'react-router-dom';
import asyncComponent from 'client/utils/async-component';
export default [
<Route
key="index" exact path="/index"
component={asyncComponent(import('./container') as any)} />,
];对于外部样式,stylus或css均支持。
为避免ts的编译错误,使用require方式引入:
require('client/assets/app.styl')
require('client/assets/app.css')对于scoped样式,使用如下方式:
render() {
return (
<div>
<header key="header" className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h3 className="App-title">Welcome to React!</h3>
<Sub></Sub>
</header>
<style jsx>{`
.App-header {
h3 {
color: red;
&:hover {
color: green;
}
transition: all .4s;
height: 20px;
}
}
`}</style>
</div>
)
}详细文档请参考styled-jsx, 已引入styled-jsx-plugin-stylus 与 styled-jsx-plugin-postcss。
外部与scoped样式均已支持autoprefixer, pxtorem, cssnano三个postcss插件。
import axios from 'axios'
axios.get('/xxx')
.then((data) => {
// data即为后端返回的数据
})目前仅支持css的热替换,ts更新后会自动刷新浏览器。官方也是推荐这样做,也许未来对ts/js的热替换会有更好的支持。