Boost Frontend Efficiency: Mastering Feflow’s Workflow and Plugin System

Preface

Front‑end engineering refers to the series of steps that transform development‑stage code into production code, including building, branch management, automated testing, and deployment. This article introduces a team's practice using Feflow as the front‑end workflow combined with a Git workflow to streamline development and improve efficiency.

Feflow Overview

Feflow is a front‑end workflow and standards tool hosted on GitHub (Tencent/feflow) that aims to boost development efficiency.

Design Philosophy

Feflow adopts a pipeline‑like approach, dividing daily R&D work into five steps: init, dev, build, test, and deploy, each mapped to a basic command. In addition to the core workflow, Feflow provides an extensible plugin mechanism for building a unified tool‑chain ecosystem.

Stages

init: project initialization, generate repository from templates.

dev: local development.

build: use build tools to package the project for production.

test: deploy to test environment.

deploy: deploy to production.

Concepts

To use Feflow, you need to understand the following concepts:

Scaffolding

Development kit

Plugin

Scaffolding

Many front‑end teams suffer from inconsistent project structures because new projects are often copied from existing ones. Feflow introduces community‑standard scaffolding (based on Yeoman) to generate a unified directory structure, automatically create remote Git repositories, assign permissions, request monitoring IDs, and integrate CI/CD.

Development Kit

After project creation, build scripts are usually scattered across projects, leading to divergence. Feflow’s development kit centralizes build scripts in an npm package, allowing all projects to share the same scripts via ~/.feflow/node_modules. Updating the kit updates all projects by changing the .feflowrc.json configuration.

Kit Loading Mechanism

When a command is run, Feflow loads native commands, then plugin commands, then kit commands. Kit configuration is read from a project file such as .feflowrc.js, .feflowrc.yaml, .feflowrc.json, package.json, etc., which maps commands to npm packages.

Plugin

Beyond core functionality, Feflow’s plugin mechanism enables extending sub‑commands for tasks like image compression, SDK setup, code statistics, etc. Some commands are abstracted as plugins independent of the project framework.

Command Design

Feflow classifies commands into three categories:

Native commands: built‑in commands.

Development‑kit commands: project‑specific commands provided by a kit.

Plugin commands: extensible commands provided by plugins.

Feflow Installation

First install Feflow globally, then use feflow init to select a scaffolding template. Custom plugins and scaffolds can be installed with feflow install.

Feflow CLI Installation

npm i feflow-cli -g

Scaffolding Installation

Feflow does not ship a built‑in scaffold; scaffolds are installed via Feflow. For a quick start, install the generator-ivweb scaffold and initialize a project.

feflow install generator-ivweb
feflow init

After learning the basics, the next step is to integrate custom scaffolds, development kits, and plugins.

Feflow Integration

Integrating Feflow involves abstracting daily pages into scaffold templates, packaging commands into a development kit, and optionally creating plugins for common functionality such as image upload.

Develop scaffold template

Implement development kit

Implement plugin

Creating a Scaffold

Feflow’s scaffold is based on Yeoman. Refer to Yeoman’s authoring guide for details.

Preparation

Install Yeoman globally and the generator-generator package: npm install yo generator-generator Generate scaffold template: yo generator Provide a description during generation; it populates the package.json description field used by Feflow.

Typical scaffold directory structure:

|- generator
  |- app:
    |- index.js (template logic)
    |- templates (template files)
      |- dummyfile.text

Creating Your Own Scaffold

Copy an existing project’s directory structure into generators/templates/ to create a custom scaffold. Example of a simple React‑based scaffold:

|- src
    |- index.html
    |- index.js
|- .babelrc
|- .eslintrc
|- .eslintignore
|- .editorconfig
|- .feflow.json (bridge between project and Feflow)

The .feflowrc.json file configures development‑kit commands for the project.

Dynamic Template Content

Yeoman templates support <%= variable %> syntax for dynamic values, such as project name.

{
  "name": "<%-name %>",
  "version": "1.0.0",
  "description": "<%-description %>"
}

Project Generation Logic

A basic generator copies the template to the target directory; advanced generators prompt the user, run custom scripts, render the template, and write files.

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 */ }
};

Scaffold Debugging

Link the scaffold package to Feflow’s global directory:

cd <your-path>/generator-startkit-demo
npm link
cd ~/.feflow
npm link generator-startkit-demo
# add the scaffold name to ~/.feflow/package.json dependencies
feflow init

After initialization, the created directory (e.g., react_demo) shows the remote repository configured and a commit record.

Implementing a Development Kit

A development kit provides a set of commands for a specific project type and is published to npm with a name prefixed by feflow-devkit-. Example configuration (devkit.json):

{
  "devkit": {
    "commands": {
      "dev": {
        "implementation": "./lib/command/dev.js",
        "description": "development mode.",
        "optionsDescription": {
          "p": "choose port",
          "dist": {
            "description": "output directory",
            "alias": "d"
          }
        }
      },
      "build": {
        "implementation": "./lib/command/build.js",
        "description": "build page"
      },
      "deploy": {
        "implementation": "./lib/command/deploy.js",
        "description": "build and publish page"
      }
    }
  }
}

Each command implementation exports a function. Example dev.js:

const buildDev = () => {
  const devServer = require('../build/dev-server');
  return devServer.then(response => {
    console.log('response', response);
  }).catch(error => {
    console.log('error', error);
  });
};
module.exports = buildDev;

After developing the kit, debug by linking it into the project’s node_modules and declare it in .feflowrc.json:

module.exports = {
  devkit: {
    commands: {
      dev: {
        builder: "feflow-devkit-demo:dev",
        options: {}
      },
      build: {
        builder: "feflow-devkit-demo:build",
        options: {}
      }
    }
  }
};

Implementing a Plugin

Plugins extend generic sub‑commands and must be named with the feflow-plugin- prefix. Example: a feflow-plugin-commit that automates git commit, pull, and push following the Angular commit convention.

Project Creation

Create a folder feflow-plugin-commit and run npm init. Ensure the package name matches the folder name.

Logic and Registration

In index.js, register the command:

feflow.cmd.register('commit', 'git commit', async function(args) {
  if (!fs.existsSync(cwd('./.git'))) return errorLog('Not a git project');
  const { workDirHasFile } = await validateCommit();
  const [error] = await pullUpdates();
  if (error) return;
  const answer = await inquirer.prompt(commitAnswers);
  const commitMsg = getCommitMsg(answer);
  await commit({ workDirHasFile, commitMsg });
  await push();
});

Full source is available at the GitHub repository.

Plugin Debugging

Link and install the plugin:

cd <your-path>/feflow-plugin-commit
npm link
cd ~/.feflow
npm link feflow-plugin-commit
# add to ~/.feflow/package.json dependencies
feflow commit

Feflow loads all feflow-plugin-* packages from ~/.feflow/node_modules. After publishing to npm, install with: feflow install <package> The plugin will be placed in ~/.feflow/node_modules.