公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoManreact脚手架generator-react-webpack上搭建改造,这里作为记录。

代码在这里: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配置入口文件

整体应用技术

  • react
  • redux
  • react-router(4.0.0^,可以换成2x或者3x)
  • eslint
  • karma + mocha
  • immutable(可选)

在原始脚手架上新增

  • 路由(react-router)
  • 调试工具(react devTools)
  • 增加文件分类(images/fonts/media)
  • 生产配置增加文件hash,公共库拆分
  • 添加异步middleware,统一处理全局状态
  • 改造Actions/Reducers

改造过程

拆分生产环境公共库,生成文件hash

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上做了文章,将公共库分离成vendor,同时配合CommonsChunkPlugin进行代码抽离。最后将output的文件名加上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前端库,进行改造。如果你需要自己写组件的话,个人愚见还是区分一下。

加入immutable

加入这个看个人意愿,加入之后必定会造成一定的学习以及开发成本,但是对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,可以自行百度、谷歌。

使用路由,拆分views文件夹

加入react-router,脚手架中是没有生成路由的(可能有吧,只是楼主没有找到

记一次改造react脚手架的过程的更多相关文章

  1. react脚手架改造(react/react-router/redux/eslint/karam/immutable/es6/webpack/Redux DevTools)

    公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...

  2. 【webpack系列】从零搭建 webpack4+react 脚手架(一)

    搭建一个React工程的方式有很多,官方也有自己的脚手架,如果你和我一样,喜欢刨根究底,从零开始自己一行一行代码创建一个React脚手架项目,那你就来对地方了.本教程是针对React新手,以及对web ...

  3. webpack4构建react脚手架

    create-react-app 脚手架还没有更新到webpack4,但是猛然间发现webpack4已经到 v4.12.0 版本了!!!慌得不行,正好端午有空所以研究了一波,自己搭建了一个简单的rea ...

  4. 前端笔记之React(三)使用动态样式表&amp;antd&amp;React脚手架&amp;props实战

    一.使用动态样式表 1.1 LESS使用 全局安装Less npm install -g less 创建1.less文件,然后可以用lessc命令来编译这个文件: lessc 1.less 1.css ...

  5. 改造 vue-cli 脚手架

    改造 vue-cli 脚手架 注意,这里使用的 vue-cli 的版本为 2.8.2,不同版本的 vue-cli 可能会有些许不一样. 一.配置多页面 项目开发目录: 需要注意一点,每个页面的文件夹命 ...

  6. 【webpack系列】从零搭建 webpack4+react 脚手架(四)

    经过三个章节的学习,你已经学会搭建了一个基于webpack4的react脚手架.如果要更改配置,比如,你希望把编译后的js文件和css文件等单独放dist下的static目录下,你想想,是不是有点麻烦 ...

  7. 用webpack4从零开始构建react脚手架

    用webpack4从零开始构建react脚手架 使用脚手架 git clone git@github.com:xiehaitao0229/react-wepack4-xht.git` `cd reac ...

  8. React脚手架创建一个React应用以及项目目录结构详解

    react脚手架 用来帮助程序员快速创建一个基于xxx库的模板项目,包含了所有需要的配置,指定好了所有的依赖,可以直接安装/编译/运行一个简单效果 react提供了一个专门用于创建react项目的脚手 ...

  9. create-react-app react脚手架

    create-react-app react脚手架 官方脚手架 1.安装 npm install -g create-react-app 2.创建项目 create-react-app react-c ...

随机推荐

  1. 8.仿阿里云虚拟云服务器的FTP(包括FTP文件夹大小限制)

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#iis 原文:http://dnt.dkill.net/Ar ...

  2. Django模板与Vue.js冲突问题

    参考: https://my.oschina.net/soarwilldo/blog/755984 方法1:修改vue.js的默认的绑定符号 Vue.config.delimiters = [&quo ...

  3. 课堂Beta发布140字评论

    Beta发布140字评论: 第一组:飞天小女警 此项目组的功能是礼物挑选,创意十足,用户只要一听名字便会被深深吸引,并且页面设计感,时尚感十足,不断吸引客户的眼球,而且发布到云服务器上面. 第二组:金 ...

  4. 基于HTML5的Drag and Drop生成图片Base64信息

    HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...

  5. xenomai安装

    一.Linux内核打实时补丁 1.将下载的Linux和xenomai安装包放在/usr/src目录下,并解压文件包,命令如下 tar xjf  Linux-3.8.13.tar.bz2   tar x ...

  6. Overview &amp; Change Log

    Overview & Change Log Nova Framework is a PHP 5.5+ MVC Framework. It's designed to be lightweigh ...

  7. testlink邮件设置(centos 7)

    上一篇文章在centos 7上安装了testlink(CentOS 7下安装xampp和testlink),本篇进行邮件设置,可在进行testlink密码修改.用例指派时进行邮件通知 1.修改conf ...

  8. ArcEngine 图层无闪烁刷新

    使用AE的同行经常会遇到这样的问题,图层刷新.目前常用的有以下几种方法: 1.完全刷新 MapControl.Refresh(); 2.局部刷新 MapControl.Refresh(esriView ...

  9. 【转】AS3操作XML,增加、删除、修改

    var i:Number=0;//用于下面循环 var webcontent:String="Sontin's Blog <b>Welcome to 终吾一生</b> ...

  10. xcode8的那些坑儿

    前几天手又贱,更新了xcode8....被几个坑玩坏了.最起码,字体改了,我现在还没有适应.下面列举了这两天遇到的问题 1.关于相册,照相,通讯录,麦克风的权限问题 xcode8打完包安装后,你会发现 ...