背景
每个公司甚至每个项目组,在开发新项目的时候都会有一些自己特色的东西,比如公共组件,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
- 打包优化
generator-ivweb默认使用builder-webpack4构建,webpack4中所做的一些优化,比如treeShaking都有用到。并且这里我们默认给react和react-dom加了外链cdn(使用我们自己的cdn,如果不放心可以改为自己的cdn)。
内联语法
比如一些meta标签,页面loading等,都可以通过内联方式引入
还有一些js文件我们可能也需要内联到html中提前加载多样化配置文件
项目默认集成了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以便于我们改进。