aif-tool v1.1.4
AIF-TOOL
Install
npm install -g aif-tool
引言
"每18至24个月，前端都会难一倍"。难，是前端发展史偶然中的必然。但难，也造就着前端当下的繁荣。好在大浪淘沙，淘尽天下MVVM框架。三分天下，React,Angular,Vue。基于ES6开发组件，配合Webpack实现打包，最终托管在NPM。随着开发团队规模不断发展壮大，在人员增加的同时也带来了协作成本的增加，业务项目越来越多，类型也各不相同。组件、基于React+Redux+React-Router的业务项目、Node.js项目等等。想要对每个项目进行一些规范的约束比如Git提交规范、Javascript规范简直难于登天。所有的这些，只因为缺少一个好用的工程化工具。从项目创建、开发、构建、代码规范检查到最终项目上线，通过CLI可以提升效率，同时保障开发规范的实施。
AIF-TOOL(阿尔法)脚手架起源
AIF-TOOL是反欺诈(Anti-fraud)前端组的CLI工程化脚手架，中文名阿尔法期望反欺诈前端组成为同盾的一支精锐部队，具备全端全栈开发能力。AIF-TOOL致力于提升研发效率和规范的工程化解决方案。愿景是通过AIF-TOOL，可以使项目创建、开发、构建、规范检查到最终项目上线的整个过程更加自动化和标准化。
要解决的问题：
- 项目的目录结构按约定生成
- 团队有一套开发规范进行约束
- 基于Webpack+React全家桶+Node微服务的统一技术栈
版本要求：npm >=8.0.0
npm install aif-tool -g
设计思路
AIF-TOOL借鉴了vue-cli的思路，项目模板作为资源独立发布在git上，然后在运行的时候将模板下载下来，经过模板引擎渲染，最后生成工程。这样将项目模板与工具分离的目的主要是，项目模板负责项目的结构和依赖配置，脚手架负责项目构建的流程，这两部分并没有太大的关联，通过分离，可以确保这两部分独立维护。假如项目的结构、依赖项或者配置有变动，只需要更新项目模板即可。
Npm模块、React组件、React全家桶项目搭建、Nodejs应用等等，都统一由AIF-TOOL帮你解决。
前端工程化生命周期
前端工程的不断演进，使得前端开发日趋复杂，对代码规范和质量的诉求在不断增加。现阶段Web工程应该包含以下几个阶段：初始化、开发、构建、检查、发布。如下图所示：
基于Node 的CLI脚手架设计思路如下：
开发者会和CLI进行交互，开发者会告诉CLI需要创建哪一种类型的项目，CLI收到命令后。从Gitlab上拉取对应的模板并生成工程。然后，CLI会调用Gitlab API在远程创建仓库并且授予开发者master权限。之后，在本地目录生成代码并且安装项目依赖的npm包，最后将本次初始化生成的所有代码自动提交到远程Git仓库，并实现自动部署和发布。
基于Webpack和ES6构建NPM包
用ES6编写代码，使用Webpack打包导出模块，并发布到NPM社区，添加基于Travis-CI和Coveralls的持续集成到Github项目中
初始化
aif-tool i webpack-npm特性
1、基于 Webpack4
2、使用 ES6 编写源码
3、模块支持:
4、使用 Jest 自动化测试，并通过 nyc 测试代码覆盖率
5、持续集成 (Travis-CI + Coveralls)
React全家桶开发
AIF-TOOL全面拥抱React生态，基于React 16 + Redux 4 + React-Router 4 + Webpack 4 实现单页，多页，SPA一站式应用开发。
初始化
aif-tool i webpack-react特性
1、一切皆组件，基于面向对象+MVC模式进行业务开发
2、React核心文件统一管控，打包分离，线上生产环境独立应用，cdn托管对版本进行收敛
3、模块约定:
- 优先使用npm包
- components放置跨页面级组件&业务组件
- page是业务开发目录，mods放置私有组件，减少不必要的暴露
4、assets进行一些公共资源托管
5、支持静态交付&演示，dist目录可以通过http服务直接演示
参考文献：