feflow脚手架

1-1.png

1. 脚手架，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 下。