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、模块支持:

• 在浏览器环境下使用，通过script标签来引入这个类库
• 通过 NPM 安装使用
• 兼容 ES6 (ES2015) 的模块系统、 CommonJS 和 AMD 模块规范

4、使用 Jest 自动化测试，并通过 nyc 测试代码覆盖率

5、持续集成 (Travis-CI + Coveralls)

6、使用 ESLint + Standrad 检测代码质量

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服务直接演示

参考文献：

Vue CLI

基于nodejs的脚手架工具开发经历