背景
背景1:
前端上工程化后，会将工程Webpack或者Rollup等构建工具代码放置于项目内，但是99%的情况，我们是不会动这一部分的构建代码，建议把构建相关代码封于npm包内。
背景2:
前端项目多个的时候，已经将构建代码置与npm包内，但babel和eslint读取的配置还是项目里的，不需要每个项目都存在相同的eslint配置文件
背景3:
我开发libs库或者Web项目时，希望使用相同的script命令，并且能快速增加一些自己的命令，用于发布测试等。
背景4:
快速通过模版生成功能，项目初始化需要填写必要信息，以生成文档和LICENSE。
为什么选择Feflow
业界已经有很好的构建工具
| 工具 | 地址 |
|---|---|
| vue-cli | cli.vuejs.org/zh/ |
| next.js | nextjs.org/ |
| rollup-starter-lib | github.com/rollup/roll… |
以上工具已经很成熟了，但是或多或少在某些地方不符合我们团队的要求。从0开始弄会非常麻烦，没有统一的封装规范、代码最终肯定会混乱。Feflow因此诞生。
请优先使用上述工具，若不符合团队要求才考虑自行编写前端工作流
Feflow提供了什么
关于Feflow内核介绍还是官方文档写的好，我这里用通俗的功能说明下Feflow帮我做的事情
脚手架
创建项目时、需要进行一些操作可以通过自动化处理，Feflow提供了脚手架实际使用了yeoman-generator进行项目模版生成器
功能
- 拉取项目模版
- 生成git仓库项目
- 自动生成并绑定流水线
- 日志监控系统绑定
- npm install
- 输入作者名字和邮箱生成LICENSE和简单的README
- 输出项目使用说明
操作
- git clone generator-example
- 将项目模版复制到/generators/app/templates内
- 注意将隐藏文件修改前缀，例如.gitignore修改为_gitignore，在通过命令里的copyTpl在生成项目时将名字改回来;
- 在generators/app/index.js文件编写cli命令，可以设置要求输入作者、邮箱等信息
- 完成后，上传至npm，建议开头为generator-fef-xxx
- fef install generator-fef-xxx
- fef init 选择对应的generator并根据提示进行操作
套件
开发套件用于将构建脚本与工具进行抽离
功能
- 提供对外一致的命令声明
- 构建工具与业务项目进行隔离，后期只需更新npm包即可完成构建工具升级
- 套件内只需考虑脚本实现，与cli绑定合参数交互交由feflow处理即可
操作
- 初始化为npm项目，修改name，建议开头为feflow-devkit-xxx
- 编写README.md，增加命令说明文档
- 在src/lib/内编写脚本命令，注意要通过 module.exports = () => {} 将函数对外暴露
- 根目录编写devkit.json
- 加载业务的配置信息通过path.resolve()， 构建工具包的配置信息通过path.join(__dirname, 'xxx.js')
- 在业务项目里通过.feflowrc.json将cli与开发套件的命令进行映射
- 在业务项目通过fef xxx执行命令
插件
本人还没有使用过插件，不提供这块相关指导，请查阅官方教程
通过脚手架和套件可以实现类似vue-cli等操作，初始化项目，并隐藏构建工具和配置
对团队带来的帮助
- 新建项目，不在直接复制老项目代码，然后删除配置，而是通过generator进行初始化构建，保证初始化工作不会有所遗漏(忘记修改package.json信息)
- 业务项目内除了业务相关的源码、文档、业务专用配置文件其他文件都通过devkit进行隐藏，让项目更加干净，后续进行构建工具升级，更新devkit版本即可
未来展望
随着feflow的社区壮大，可以在社区内下载 '自动cos上传'、'自动提交mr'、'检查README.md' 等devkit
