公司突然组织需要重新搭建一个基于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,公共库拆分

改造过程

拆分生产环境公共库,生成文件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. hao.360.cn不停跳....

    最近单位里访问hao.360.cn经常会跳....无限循环,有时跳几十次后才会打开.... 但是,单位里走电信出口部分的电脑就没有问题...同样的电脑(移动出口)的用360浏览器.火狐也问题不大,关键 ...

  2. 鸟哥的linux私房菜---非常好的linux基础网址【转】

    转自:http://linux.vbird.org/linux_basic/0320bash.php 在 Linux 的環境下,如果你不懂 bash 是什麼,那麼其他的東西就不用學了!因為前面幾章我們 ...

  3. 让Tomcat支持中文文件名

    --参考链接:http://blog.chinaunix.net/uid-26284395-id-3044132.html 解决问题的核心在于修改Tomcat的配置,在Server.xml文件中添加一 ...

  4. HPCC 登录总结

    最近开始做NGS的分析,数据明显更大,在自己的机子上面做有些不现实了,需要登录高性能计算机. 1. 目录结构: home directory: /auto/rcf-40/USERNAME -- onl ...

  5. 闲话Cache:始篇

    Caching(缓存)在现代的计算机系统中是一项最古老最基本的技术.它存在于计算机各种硬件和软件系统中,比如各种CPU, 存储系统(IBM ESS, EMC Symmetrix…),数据库,Web服务 ...

  6. iOS获取运营商信号强度

    此API是apple私有API,所以只可运用在越狱设备中,如果提交appstore,会遭遇apple的拒绝上架反馈! #import <dlfcn.h> int getSignalLeve ...

  7. Chapter 2 Open Book——23

    Mike interrupted us then — he was planning an epic battle of the blizzard in the parking lot after s ...

  8. Qt 5.5 tr usage

    in .cpp file, wherever you want, wrap QString with a tr("somesz") rendering it ready to be ...

  9. [Oracle]约束(constraint)

    (一)约束的概念 在Oracle中,可以通过设置约束来防止无效数据进入表中.Oracle一共有5种约束: 主键约束(primary key) 外键约束(foreign key) 唯一性约束(uniqu ...

  10. 取消 Vue 中格式编译警告

    使用VS Code在学习 Vue 的过程中,博主是在2.0之后开始学习的,在写项目的时候发现控制台经常会报一大堆的警告,都是关于格式的,有时候少空格,有时候多空格,不胜其烦,出现这个问题是因为在初始化 ...