1-1.png
- 脚手架，fellow的脚手架基于yeoman
全局安装yo和generator
npm install yo generator-generator -g
生成脚手架模板
yo generator
生成结构如下
|- template
|- src # 示例源码
|- index.html # HTML 入口
|- index.js # JS 入口，也是 Webpack 打包的入口
|- _babelrc # 处理 JSX 的配置
|- .feflowrc.json # 这个文件是必须的，作为项目和 Feflow 的桥梁
|- index.js
然后我们可以在这里统一我们前端架构的目录结构，文件命名，后续开发者在项目初始化的时候，可以选取针对特定端的套件，比如小程序我们选取小程序套件，这样达到所有小程序架构目录和层级都是相同的。
这里我们注意看下.feflowrc.json,我们可以看到这里就是我们平常常用几个构建命令。
{
"devkit": {
"commands": {
"dev": {
"builder": "@tencent/feflow-devkit-basic:dev",
"options": {}
},
"build": {
"builder": "@tencent/feflow-devkit-basic:build",
"options": {}
},
"lint": {
"builder": "@tencent/feflow-devkit-basic:lint",
"options": {}
},
"changelog": {
"builder": "@tencent/feflow-devkit-basic:changelog",
"options": {}
}
}
}
}
那么构建脚本如何编写？
这里我们看下index.js
const Generator = require('yeoman-generator');
module.exports = class extends Generator {
// 初始化阶段
initializing () { /* code */ },
// 接收用户输入阶段
prompting () { /* code */ },
// 保存配置信息和文件
configuring () { /* code */ },
// 执行自定义函数阶段
default () { /* code */ },
// 生成项目目录阶段
writing () { /* code */ },
// 统一处理冲突，如要生成的文件已经存在是否覆盖等处理
conflicts () { /* code */ },
// 安装依赖阶段
install () { /* code */ },
// 结束阶段
end () { /* code */ }
}
Yeoman 提供了一个基础的生成器类 Generator，我们基于它扩展自己的生成逻辑。Generator 类定义了八个生命周期，它们会按上述代码的顺序依次执行。
构建器完成之后，我们的脚手架模板就完成了，然后要把脚手架模板安装起来
cd <your-path>/generator-startkit-demo
npm link
cd ~/.fef
npm link generator-startkit-demo
修改package.json
vi package.json
i（进入编辑模式）
在package.json中添加"generator-startkit-demo": "1.0.0"，为了是fellow找到你的模板
esc、:wq (退出保存)
这样一个脚手架模板就注册完成了，开发者用户可以fef init命令就可以在之后的操作中看到。
下面我们看下开发者用户端如何使用：
全局安装cli
npm install [@feflow](http://km.oa.com/user/feflow "@feflow")/cli -g
如下图，我们看到，初始化工具选择模板，这里就要用到我们自定义注册过的模板
1-3.png
然后安装提示输入
1-3.png
初始化完后，可以进入工程目录，然后使用fef dev 或者 fef build编译项目。
最后我们看下扩展插件：
扩展插件使用feflow-plugin-*命名，通过context.commander.register注册组件
1-3.png
这里我们可以看到register提供了三个参数，命令名称/命令描述/命令的具体执行方法。
这样我们就完成一个插件的实现部分，下面看下调试部分。
运行 npm link 将插件项目链接到 NPM 全局。
运行 cd ~/.feflow 进入到 Feflow 主目录下。
运行 npm link feflow-plugin-example 将插件安装在 Feflow 主目录下。
编辑 ~/.feflow/package.json 文件（可用 vi ~/.feflow/package.json 编辑），在 dependencies 字段中添加一行 "feflow-plugin-example": "1.0.0"。
运行 feflow add 1 2 3 启用插件。
这里是结果
1-4.png
插件调试完毕之后，我们可以通过fef install 插件来安装到项目中，扩展项目的功能。Feflow 会将插件安装在 ~/.fef/node_modules 下。
