generator-ivweb 基于react-redux的多页脚手架
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
继承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等，都可以通过内联方式引入```<!--inline[/assets/inline/meta.html]-->``` 还有一些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
未来规划
- 添加测试用例，提高稳定性。
- 完善脚手架内容，提供更高效的内容
项目地址
https://github.com/feflow/generator-ivweb， 欢迎大家提issue以便于我们改进。