feflow / generator-redux-startkit

A generator for multiple-page application with react and redux.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

npm version codecov code style: prettier Commitizen friendly PRs Welcome

generator-redux-startkit

A generator for multiple-page application with react and redux.

基于react和redux的多页面项目模板。用于feflow,依赖构建器builder-webpack4

快速开始

## 安装feflow
$ npm install feflow-cli -g
## 安装脚手架
$ feflow install generator-redux-startkit
## 初始化项目
$ feflow init
# 输入相关参数
$ cd <folder>
## 本地开发
$ feflow dev
# 访问默认端口http://127.0.0.1:8001

feflow依赖

本项目依赖feflow@0.15.0或以上版本,如果你之前已安装过旧版feflow,在feflow dev时可能会出现以下错误:

Cannot destructure property 'createHash' of 'undefined' or 'null'.

如果出现这种情况,可以采用如下操作进行修复:

## 进入.feflow目录
cd ~/.feflow
## 清空node_modules并重新安装构建器
rm -rf node_modules
npm install builder-webpack4 --global-style
## 在项目中重新运行feflow
cd your_project
feflow dev

项目规范

目录结构

本项目采用多页面、共模块的目录结构。可以利用到React/Redux的开发效率及可读性,也适合于在app中进行多个内嵌页面的hybird开发。

所有页面在src/pages下,每个页面都遵循Rails-style目录结构,下面以index页面为例,介绍一个页面中的目录结构:

└── index
    ├── actions // 存放action
    ├── assets // 图片等静态资源
    ├── components // 页面公用组件
    ├── connect // connect相关
    ├── container // 容器
    ├── index.html
    ├── init.js // 启动入口js
    ├── reducers // reducers
    ├── root // 根组件,处理热更新
    └── stores // stores

代码规范

本项目采用Eslint+Prettier代码风格,对于代码格式检查比较严格,如果遇到不知道如何解决的Eslint报错,可以使用eslint . --fix进行代码格式化,如果使用vscode,command + shift + P 输入Format Document执行代码自动格式化。

CDN配置

项目默认配置了reactreact-dom的cdn,在feflow.json中可以对external进行修改。

"externals": [
    {
        "module": "react",
        "entry": "https://unpkg.com/react@16/umd/react.development.js",
        "global": "React"
    },
    {
        "module": "react-dom",
        "entry": "https://unpkg.com/react-dom@16/umd/react-dom.development.js",
        "global": "ReactDOM"
    }
]

如何贡献

  1. 从目前已经存在的issue或者提出一个新的issue去讨论新的特性或者存在的bug。
  2. 在Github上Fork 仓库,然后在master或者其它分支上开始进行您的修改。
  3. 编写测试用例表明某个bug被修复掉了或者新的特性可以正常工作。
  4. 提交PR,如果通过了测试并且覆盖率没问题,会进行Code Review并合并。

About

A generator for multiple-page application with react and redux.

License:MIT License


Languages

Language:JavaScript 90.3%Language:CSS 4.8%Language:HTML 4.8%