前端网站脚手架
- 配置:统一明确的配置文件(支持开发和生产模式,多部署环境)
- 构建:webpack4 (多html,分包,dev server,热加载)
- 样式:less
- 项目配置:react + react-router-dom + reflux + fetch。
- 国际化:i18n + i18n-service
- [email protected] (support: async, await, es class等……)
process.env.NODE_ENV
: 主要配置本地开发调试
和发布
的区别,development, production.process.env.APP_ENV
: 配置不同发布环境:dev, test, prod 等...
- 为了组件和单元测试中路径的统一,请在开发中使用别名
@
- `git clone [email protected]:WeConnect/china-spacestation.git
npm install
npm run dev
配置文件放在config
目录下:
project.conf.js
: 项目的常规配置,不分环境。define.conf.js
: 配置项目中的常量[DefinePlugin]
-
action.js中定义一个变量,store.js中监听
-
action: loginUser
-
store: onLoginUser
-
使用:引入action.js和store.js
-
更新数据:action.loginUser('传入的值')
-
读取数据:store.XXX (XXX为store中定义的变量)
- import { withRouter } from 'react-router-dom';
- withRouter(组件)
- 使用:this.props.history.push(页面)
- react-ionicons:
- https://zamarrowski.github.io/react-ionicons/
-
文件名.test.jsx
-
npm test
ornpm test (page path)
-
如果有引用的全局变量报错,可以在package.json/jest/globals中设置
-
[配置及使用参考]
-
mock fetch方法:(有返回值)
-
例: 模拟feeds.js文件中getList函数请求接口后返回数据
jest.mock('@/fetch/feeds', () => ({
getList: () => {
const feedsList = require('tests/response/feeds')
return {data: feedsList}
},
}))
- 翻译在后台管理中录入,不能直接修改本地文件
- http://i18n.nakedhub.com/
- 每次录入语言后,本地执行
npm run i18n
下载文件
- 组件的使用请参考
组件.test.jsx
文件
---- app:
|---- components: 公共组件
|---- containers: 页面
|---- entry: 入口js
|---- fetch: 定义所有的请求接口
|---- reflux: 数据存储(用户信息等)
|---- loginUser: 登陆用户
|---- languages: 语言
|---- pathname: 当前页面path
|---- cities: 城市列表
|---- locations: 社区列表
|---- router: 页面路由
|---- static:
|---- images: 图片(组件中引用图片:require('相对路径'))
|---- style: css
|---- utils: 自定义函数
|---- template: html模板
|
---- build: 构建脚步
|
---- config: 配置文件
|---- project.conf.js: 项目的常规配置,不分环境
|---- define.conf.js: 配置项目中的常量
|---- public.conf.js: 构建输出配置
|
---- script: 存放项目需要的相关脚本文件
|---- i18n-download.js 从`i18n-service`下载翻译文件
|
---- root: 不需要编译,直接输出到根目录的文件