前端工程化-Feflow实践

npm i feflow-cli -g

feflow install generator-ivweb
feflow init

npm install yo generator-generator

yo generator

|- generator
  |- app：
    |- index.js（创建模板逻辑）
    |- templates（模板代码）
      |- dummyfile.text

|- src # 示例源码
    |- index.html # HTML 入口
    |- index.js # JS 入口，也是 Webpack 打包的入口
|- .babelrc # 处理 JSX 的配置
|- .eslintrc # eslint规则
|- .eslintignore # 忽略eslint校验的文件配置
|- .editorconfig # 协同团队开发人员之间的代码的风格及样式规范化
|- .feflow.json # 这个文件是必须的，作为项目和 Feflow 的桥梁

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

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

const Generator = require('yeoman-generator');
const chalk = require('chalk');
const yosay = require('yosay');
const simpleGit = require('simple-git');
module.exports = class extends Generator {
  prompting() {
    this.log(
      yosay(`欢迎使用 ${chalk.red('generator-h-5-project')} generator!`)
    );
    return this.prompt([
      {
        type: "input",
        name: "name",
        message: "请输入项目目录名（英文）",
        default: "demo"
      },
      {
        type: "input",
        name: "remote",
        message: "请输入远程仓库地址",
        default: "项目基本描述"
      }
    ]).then(answers => {
      this.answers = answers;
    });
  }
  writing() {
    const { name } = this.answers;
    this.destinationRoot(this.destinationPath(name));
    this.fs.copyTpl(
      `${this.templatePath()}/**/!(_)*`,
      this.destinationPath(),
      this.answers,
      {},
      { globOptions: { dot: true } } // Copy all dots files.
    );
  }
  install() {
    console.log("安装依赖，过程持续1~2分钟");
    this.yarnInstall();
  }
  async end(){
    const { name, remote } = this.answers;
    console.log("本次初始化过程结束, 请通过以下命令运行项目: ");
    console.log();
    console.log(chalk.cyan("  cd"), name);
    console.log(`  ${chalk.cyan("feflow dev:本地调试")}`);
    console.log(`  ${chalk.cyan("feflow commit:代码提交")}`);
    console.log(`  ${chalk.cyan("feflow build:本地构建")}`);
    console.log(`  ${chalk.cyan("feflow deploy:发布正式环境")}`);
    console.log();
    console.log("编码愉快!");
    // 初始化git仓库，并增加一条提交记录
    const git = simpleGit({
      baseDir: this.destinationPath()
    });
    await git.init().addRemote('origin', remote);
    await git.add('.');
    await git.commit('feature:first commit')
  }
};

cd <your-path>/generator-startkit-demo(你本地脚手架开发目录)
npm link 
cd ~/.feflow
npm link generator-startkit-demo（你的脚手架包名~脚手架开发目录里package.json里的name属性）
修改 ~/.feflow/package.json里的dependencies，把你的脚手架包名写进去，版本号随便写
feflow init //就可以看到脚手架

{
  "devkit": {
    "commands": {
      "dev": {
        // dev 命令对应的真正实现脚本
        "implementation": "./lib/command/dev.js",
        // dev 的描述，会在 feflow -h 的时候显示出来
        "description": "开发模式.",
        // dev 的子命令
        "optionsDescription": {
          // 简单的命令描述
          "p": "选择端口构建",
          // 支持别名
          "dist": {
            "description": "构建产物目录",
            "alias": "d"
          }
        }
      },
      "build": {
        "implementation": "./lib/command/build.js",
        "description": "构建页面",
      },
      "deploy": {
        "implementation": "./lib/command/deploy.js",
        "description": "构建并发布页面",
      },
    }
  }
}

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;

module.exports = {
    // 必须
    devkit: {
        // 必须，代表着 feflow 的命令
        commands: {
            // 推荐，代表着 feflow dev 的命令
            dev: {
                // 必须，代表着 feflow dev 命令对应执行的套件命令，这里表示使用套件 feflow-devkit-demo 的 dev 命令，配置格式为 `<套件>:<命令>`
                builder: "feflow-devkit-demo:dev",
                // 可选，如果上述套件命令支持一些配置，可以写在这里
                options: {}
            },
            // 推荐，代表着 feflow build 的命令
            build: {
                // 必须，代表着 feflow build 命令对应执行的套件命令，这里表示使用套件 feflow-devkit-demo 的 build 命令
                "builder": "feflow-devkit-demo:build",
                // 可选，如果上述套件命令支持一些配置，可以写在这里
                "options": {}
            }
        }
    }
}

git add . 
git commit –m 'feat:新增新功能'
git pull
git push

feflow.cmd.register('commit', 'git 提交', async function(args) {
  // 判断是否git项目
  if (!fs.existsSync(cwd('./.git'))) return errorLog('当前项目不是git项目');

  // 检查是否需要 commit 或者 add
  const { workDirHasFile } = await validateCommit();
  
  // 需要push的话，先判断是否有远端分支，且本地是否落后于远端
  // 是则先暂存(git stash)本地修改，更新代码后再恢复 (git stash pop)

  const [error] = await pullUpdates();
  if (error) return;
  const answer = await inquirer.prompt(commitAnswers);
  const commitMsg = getCommitMsg(answer);
  
  await commit({
    workDirHasFile,
    commitMsg,
  });

  await push();
});

cd <your-path>/feflow-plugin-commit
npm link
cd ~/.feflow
npm link feflow-plugin-commit

$ feflow install <package>