generator-ivweb 基于react-redux的多

2019-01-15 本文已影响20人 Stevenzwzhai

背景

每个公司甚至每个项目组，在开发新项目的时候都会有一些自己特色的东西，比如公共组件，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	页面继承
创建BasePage	继承basePage

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

组件划分

通常我们在开发一个单页应用都会抽离一些公共组件，比如title-bar

首页	博客页
image.png	image.png

如果这里是个多页应用，同样是可以公用的，因此对于多页应用来说，组件应该是这样的结构：

image.png

状态管理

每个页面的状态管理同样是可以抽离一些公共action和reducer，比如登录逻辑

image.png

模块化

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

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

打包优化

generator-ivweb默认使用builder-webpack4构建，webpack4中所做的一些优化，比如treeShaking都有用到。并且这里我们默认给react和react-dom加了外链cdn(使用我们自己的cdn，如果不放心可以改为自己的cdn)。

内联语法

比如一些meta标签，页面loading等，都可以通过内联方式引入
```

```
还有一些js文件我们可能也需要内联到html中提前加载
```
<script src="amfe-flexible/index.js?__inline"></script>
```
多样化配置文件

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

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

如何使用

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

9b110b14-0d91-474a-a413-61e8a3c5c3a3.gif

未来规划

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

项目地址

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