generator-ivweb 基于react-redux的多页脚手架

背景

每一个公司甚至每一个项目组，在开发新项目的时候都会有一些本身特点的东西，好比公共组件，ajax请求拦截处理，内部积累的一些业务逻辑等等，若是没有本身的脚手架，那么拷贝代码成为常态，每一个项目的结构，甚至是构建配置都会由很大差别，致使代码维护成为一个难题。

简介

generator-ivweb是由腾讯IVWEB团队设计的脚手架，基于团队开源项目feflow，feflow是一个前端集成开发环境，详细介绍能够看这里：feflow。

技术栈

• React
• redux
• less
• axios

• webpack4
  ...

  让你心动的地方

相对于官方脚手架，咱们不只仅是初始化一个项目，更多的是知足实际开发场景。

• 支持多页项目
• 页面适配
• 内联语法
• 构建优化
• 丰富的默认配置文件

架构设计

目录结构

generator-ivweb-app
├── README.md
├── package.json
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitattributes
├── feflow.json
├── config.json
├── node_modules
├── dist
└── src
    ├── assets
    ├── middleware
    ├── modules
    └── pages
        ├── otherPage
        └── indexPage
            ├── index.html
            ├── index.js
            ├── index.less
            ├── index.js
            ├── init.js
            ├── pageComponent.js
            ├── actions
            ├── assets
            ├── components
            └── reducers

• 开发和构建
  这里咱们默认都是src为开发目录，dist为打包目录，固然你能够在feflow.json中配置为其余输出目录。

{
    "builderOptions": {
        "outDir": "dist" //输出目录名称
    }
}

• 多页目录
  多页放在pages目录下，每一个页面一个单独文件夹，访问的路径以下：

https://xxx.xxx.xxx/xxx/indexPage.html
https://xxx.xxx.xxx/xxx/otherPage.html

页面结构化继承（多页设计）

正常来讲，多页应用只须要有本身的入口就能够，在入口文件咱们可能须要作这么几件事

• 注入store
• 设置全局配置
• 页面监控
• 将组件渲染到页面
  ...
  上面只是列举了一些基本的东西，固然还会有不少，甚至是一些跟业务相关的基本信息，而这些东西对于一个工程下的多个页面来可能都是同样的，不只操做不方便，维护也很麻烦。这里咱们提出一个概念：页面结构化继承。
  继承你们都很熟悉，而react是能够用function/class方式来写组件的，咱们在用class方式写组件就是继承自React.Component，那么对于这些公有东西咱们也能够封装成一个组件，经过继承的方式来获取这些能力。

建立BasePage	页面继承

此处只写了对于多页的应用，对于复杂的单页应用一样是适用的。

组件划分

一般咱们在开发一个单页应用都会抽离一些公共组件，好比title-bar

首页	博客页

若是这里是个多页应用，一样是能够公用的，所以对于多页应用来讲，组件应该是这样的结构：

状态管理

每一个页面的状态管理一样是能够抽离一些公共action和reducer，好比登陆逻辑

模块化

鉴于脚手架默认是多页项目，咱们把公共模块放到外层目录，减小跟每一个页面的耦合。

modules
├── common //公用js模块
├── components //公用组件
├── globalStore //store配置，包含中间件注入
└── page //页面结构继承组件

构建

这里使用feflow的构建器：builder-webpack4，固然这个东西一样是能够配置的，甚至能够根据咱们的官方构建器写本身的构建器。

项目配置

脚手架是基于feflow的，所以feflow.json文件是feflow项目的基础配置，包含了一些构建选项，好比输出目录，域名，webpack相关等。

{
    "builderType": "builder-webpack4", //构建器类型
    "builderOptions": {
        "product": "", //产品民称
        "outDir": "dist", //构建输出目录
        "minifyHTML": true,
        "minifyCSS": true,
        "minifyJS": true,
        "inlineCSS": true,
        "usePx2rem": true, //是否转化px
        "remUnit": 37.5, //rem基准
        "remPrecision": 6, 
        "inject": true, 
        "useTreeShaking": true,
        "port": 8001, //项目端口
        "hot": true,
        "externals": [
            {
                "module": "react",
                "entry": "//11.url.cn/now/lib/16.2.0/react.min.js?_bid=3123",
                "global": "React"
            },
            {
                "module": "react-dom",
                "entry": "//11.url.cn/now/lib/16.2.0/react-dom.min.js?_bid=3123",
                "global": "ReactDOM"
            }
        ]
    }
}

其余

项目默认是不显示构建相关配置的，一方面，咱们有暴露一些基础配置项，另外一方面避免多人协做开发更改配置问题，若是你想查看或修改可使用命令展现(不建议修改配置)

feflow eject

优点

多页支持

generator-ivweb先天支持多页应用，而不用咱们再去webpack中配置，在开发中只须要在pages下建立多个目录便可。

页面适配

项目默认接入rem适配，会自动把px转成rem，固然，若是某些地方不想被转化，有两种方式：

• 修改px写法
  height: 300Px;
• feflow.json中设置usePx2rem为false

1. 打包优化

generator-ivweb默认使用builder-webpack4构建，webpack4中所作的一些优化，好比treeShaking都有用到。而且这里咱们默认给react和react-dom加了外链cdn(使用咱们本身的cdn，若是不放心能够改成本身的cdn)。

1. 内联语法

   好比一些meta标签，页面loading等，均可以经过内联方式引入
   <!--inline[/assets/inline/meta.html]-->
   还有一些js文件咱们可能也须要内联到html中提早加载
   <script src="amfe-flexible/index.js?__inline"></script>

2. 多样化配置文件

   项目默认集成了gitignore、eslint、editorconfig等配置，为仓库管理和开发提供了便捷。

├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitattributes

如何使用

# 安装feflow
npm install feflow-cli -g
# 安装脚手架
feflow install generator-ivweb
# 启动项目
feflow init

将来规划

1. 添加测试用例，提升稳定性。
2. 完善脚手架内容，提供更高效的内容

项目地址

https://github.com/feflow/generator-ivweb， 欢迎你们提issue以便于咱们改进。