2022-02-28 Yeoman 與 generator-generator 構建腳手架

起步

全局安裝命令

$ npm install -g yo generator-generator

安裝完成後執行

$ yo generator

會讓輸入 name、description 等相關信息

需要注意 name 會直接定義腳手架的命令方式，例如：generator-mm-cli

配置

複製所有項目文件到目錄 generator-mm-cli/generators/app/templates 下，刪除目錄下的 dummyfile.txt

打開外層的 index.js 文件，進行配置的修改，下面給一個我的例子

"use strict";
const Generator = require("yeoman-generator");
const chalk = require("chalk");
const yosay = require("yosay");

module.exports = class extends Generator {
  prompting() {
    // Have Yeoman greet the user.
    this.log(
      yosay(
        `Welcome to the perfect ${chalk.red("generator-mm-cli")} generator!`
      )
    );

    // 一些初始化項目的配置
    const prompts = [
      {
        type: "input",
        name: "projectName",
        message: "請輸入項目名字",
        default: "minemap-project",
      },
      {
        type: "input",
        name: "version",
        message: "請輸入項目版本號",
        default: "0.0.1",
      },
      {
        type: "input",
        name: "name",
        message: "請輸入你的名字",
        default: "",
      },
    ];

    return this.prompt(prompts).then((props) => {
      // To access props later use this.props.someAnswer;
      this.props = props;
    });
  }

  configuring() {
    // 用於生成配置的 package.json
    const { projectName, version, name } = this.props;
    let packageSettings = {
      name: projectName,
      version: version,
      description: "",
      scripts: {
        watch: "rollup -w -c build/rollup.config.dev.js",
        dev: "rollup -c build/rollup.config.dev.js",
        build: "rollup -c build/rollup.config.prod.js",
      },
      keywords: ["minemap", "yeoman-generator"],
      author: name,
      dependencies: {},
      devDependencies: {
        "@babel/core": "^7.17.5",
        "@babel/preset-env": "^7.16.11",
        "@rollup/plugin-babel": "^5.3.1",
        "@rollup/plugin-commonjs": "^21.0.2",
        "@rollup/plugin-json": "^4.1.0",
        "@rollup/plugin-replace": "^4.0.0",
        rollup: "^2.68.0",
        "rollup-plugin-terser": "^7.0.2",
      },
    };

    this.fs.writeJSON(this.destinationPath("package.json"), packageSettings);
  }

  writing() {
    // 寫入文件
    const templates = [
      ".babelrc",
      ".gitignore",
      ".nvmrc",
      ".prettierrc",
      "README.md",
      "src/main.js",
      "build/rollup.config.dev.js",
      "build/rollup.config.prod.js",
    ];
    templates.forEach((item) => {
      this.fs.copyTpl(
        this.templatePath(item),
        this.destinationPath(item),
        this.props
      );
    });
  }

  install() {
    // 安裝依賴
    this.installDependencies({
      bower: false,
    });
  }
};

測試一下

# 進入腳手架項目根目錄
$ cd generator-mm-cli

# 本地綁定一下命令行
$ npm link

# 切換上層目錄
$ cd ..

# 新建一個文件夾
$ mkdir demo-dest

$ cd demo-dest

# 利用腳手架構建項目
$ yo mm-cli

順着將信息輸入完成，就可以看到項目被初始化好了

發佈 npm

# 修改鏡像源
$ npm config set registry https://registry.npmjs.org

# 登錄
$ npm login

# 發佈
$ npm publish

# 撤銷發佈
$ npm unpublish <your package name>@<package version> --force

如何使用

# 安裝依賴
$ npm install -g yo
$ npm install -g generator-mm-cli

# 初始化項目
$ yo mm-cli