公司突然组织需要重新搭建一个基于
的论坛系统,前端采用
- node
,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于
- react
的
- YeoMan
脚手架generator-react-webpack上搭建改造,这里作为记录。
- react
代码在这里:github
另外推荐地址:react-starter-kit
- ├── README.md # 项目README文件
- ├── conf # 配置文件夹
- │ └── webpack # webpack配置(下面包括开发、生产、测试环境的配置)
- ├── karma.conf.js # karma测试配置文件
- ├── node_modules # 包文件夹
- ├── package.json # 包描述文件
- ├── src # 源文件夹
- │ ├── actions # redux actions文件夹
- │ ├── client.js # 客户端启动文件
- │ ├── components # 项目组件(下面分为业务组件和公共组件)
- │ ├── config # 环境配置文件夹(指明当前环境)
- │ ├── containers # 入口容器
- │ ├── exports.js # 常用组件的exports文件,可以忽略
- │ ├── images # 图片
- │ ├── index-release.html # 生产环境模板文件
- │ ├── index.html # 开发环境入口html
- │ ├── reducers # redux reducers文件夹
- │ ├── routes # 路由配置
- │ ├── sources # 资源文件(可忽略)
- │ ├── static # 静态文件(可以存放第三方库)
- │ ├── stores # redux stores文件夹
- │ ├── styles # 全局样式文件夹
- │ └── views # 视图文件夹
- ├── test # 测试文件夹
- │ ├── actions # 测试actions
- │ ├── components # 测试组件
- │ ├── config # 测试配置(检测环境)
- │ ├── loadtests.js # 加载测试文件
- │ ├── reducers # 测试reducers
- │ ├── sources # 测试资源(flux datasource)
- │ └── stores # 测试stores
- └── webpack.config.js # webpack配置入口文件
- this.config = {
- cache: false,
- devtool: 'source-map',
- entry: {
- main: ['./client.js'],
- vendor: ['react', 'react-dom', 'redux', 'react-redux', 'react-router-dom',
- 'react-router-redux', 'react-CSS-modules', 'history']
- },
- plugins: [
- new webpack.DefinePlugin({
- 'process.env.NODE_ENV': '"production"'
- }),
- new webpack.optimize.AggressiveMergingPlugin(),
- new webpack.NoEmitOnErrorsPlugin(),
- new webpack.optimize.CommonsChunkPlugin({
- name: 'vendor',
- minChunks: Infinity
- }),
- new HtmlWebpackPlugin({
- filename: path.resolve('./dist/index.html'),
- template: path.resolve('./src/index-release.html'),
- inject: 'body'
- })
- ]
- };
- this.config.output.filename = '[name].[chunkhash].js';
主要在
上做了文章,将公共库分离成
- entry
output
- vendor,同时配合CommonsChunkPlugin进行代码抽离。最后将
chunkhash`,这样在新打包的文件不会被浏览器缓存策略而缓存
- 的文件名加上
- {
- test: /\.(png|jpg|gif|ico|swf|xap)$/,
- loaders: [
- {
- loader: 'file-loader',
- query: {
- name: 'images/[name].[ext]'
- }
- }
- ]
- }
主要使用
配置,区分不同文件目录。
- query
相同道理配置即可
- fonts/media
- ├── bussiness
- │ └── README.md
- └── common
- ├── README.md
- ├── Template.js
- ├── YeomanImage.js
- └── button
主要区分业务组件和公共组件。当然你也可以不区分,引用常用的公共库如蚂蚁金服的
前端库,进行改造。如果你需要自己写组件的话,个人愚见还是区分一下。
- react
加入这个看个人意愿,加入之后必定会造成一定的学习以及开发成本,但是对
来说,运用这个库是再好不过的了,具体表现在数据的不可变性,即每次的数据都会是一个新的,不会在原始引用的数据上进行重新操作,以免造成数据污染。
- redux
- // reducers/items.js
- const initialState = fromJS({
- items: [{
- "forum_name": "武汉大学",
- "user_level": 12,
- "user_exp": 5301,
- "id": 30996,
- "is_like": 1,
- "favo_type": 2
- },
- // ...
- ]
- });
- function reducer(state = initialState, action) {
- switch (action.type) {
- case GET_ITEMS:
- return state;
- default:
- return state;
- }
- }
- // views/Home.js
- render() {
- const list = items.get('items');
- // ...
- {
- list.map((l, index) = >{
- return ( < tr key = {`list$ {
- index
- }`
- } > <td > {
- l.get('forum_name')
- } < /td>
- <td>{ l.get('user_level') }</td > <td > {
- l.get('user_exp')
- } < /td>
- <td>{ l.get('is_like') === 0 ? '是' : '否' }</td > <td > {
- l.get('favo_type')
- } < /td>
- </tr > );
- })
- }
- }
如果不清楚
,可以自行百度、谷歌。
- immutable
加入
,脚手架中是没有生成路由的(可能有吧,只是楼主没有找到
- react-router
来源: http://www.cnblogs.com/rynxiao/p/7933113.html