k's Learn Notes

打造属于自己的脚手架

初始化项目

mkdir kima-cli
npm init -y

配置eslint

npm install eslint -D

我这里没有全局安装eslint，所以要在package.json script配置完后才能运行命令。

// package.json
"scripts": {
  "eslint-init": "eslint --init",
  "eslint": "eslint src/*",
},

npm run eslint-init

依次选择

  • How would you like to use ESLint? > To check syntax and find problems
  • What type of modules does your project use? > CommonJS (require/exports)
  • Which framework does your project use? None of these
  • Does your project use TypeScript? > No
  • Where does your code run? > Node
  • What format do you want your config file to be in? > JSON

初始化完后，自行配置规则，这里不多展示。

// .eslintrc
"rules": {
  "semi": ["error", "always"],
  "quotes": ["error", "single"]
}

初始化git

git init

只有初始化了git以后，才能用git hooks。若是不使用husky，可以忽略这步。

配置husky

husky可以防止使用Git hooks的一些不好的push或commit。

非必要，不想配置也ok。

npm install husky -D

第一次安装配置，启用git hooks。安装完后，会出现.husky文件夹

npx husky install

安装后启动git hooks, 在package.json中配置。

配置完后每次执行npm i 的时候，会自动执行prepare

"scripts": {
  "prepare": "husky install"
},

接下来接可以添加挂钩，husky v4.0与v5.0，挂钩添加的方式不同。这里只展示v5.0的用法。

添加挂钩之前，一定要先运行husky install

# husky add <file> [cmd]
npx husky add .husky/pre-commit "echo pre-commit"

commit之后，会先执行pre-commit。此时会输出"pre-commit"

pre-commit

具体配置运行的命令，可以在.husky pre-commit中任意配置。

我这里配置了执行eslint

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run eslint

commit时，会先执行eslint, 校验不通过则不允许提交代码。

配置commitlint

在git commit时执行commitlint校验提交内容

  1. 先安装commitlint
npm install --save-dev @commitlint/{cli,config-conventional}
  1. 配置生成文件
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
  1. 向husky添加commit-msg hook
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'

type类型

  • feat：新功能（feature）
  • fix：修补bug
  • docs：文档（documentation）
  • style： 格式方面的优化
  • refactor：重构
  • test：测试
  • chore：构建过程或辅助工具的变动
提交校验

添加配置文件

创建 bin/kima 文件

#!/usr/bin/env node

console.log(1);

tips

#!/usr/bin/env node 表示要用系统里的node环境来执行文件

配置package.json

"bin": {
  "kima": "./bin/kima"
},

创建软链接

npm link

创建完后，测试一下，在终端输入kima， 可看到输出1。 证明配置成功。

编写入口文件

在bin/kima 文件中引入main.js，作为入口文件。

#!/usr/bin/env node

require('../src/main.js');

安装commander

commander.js是TJ所写的工具包，让node命令行程序制作更加简单。

npm install commander

在src/main.js中写入

const { program } = require('commander');
const _version = require('../package.json').version;

program.version(_version)
        .parse(process.argv);

执行kima -h, 发现默认有两个指令。-V 和 -h

这里我看-V不太顺眼，就更改了一下指令。

program.version(_version, '-v, --version');

执行kima -v, 打印了版本号 1.0.0

初步成功啦，接下来玩点好玩的。

安装 figlet和 @darkobits/lolcatjs

figlet 用于生成由字符串组成的图形

@darkobits/lolcatjs 让字符串上色

npm install figlet @darkobits/lolcatjs

修改src/main.js

const figlet = require('figlet');
const Printer = require('@darkobits/lolcatjs').default; 

const string = figlet.textSync('kima');
program
  .version(Printer.fromString(` \n 欢迎使用kima脚手架 ${_version} \n ${string}`), '-v, --version')
  .parse(process.argv);

再次执行 kima -v， 就可以看到控制台变好看了！🎉

kima -v

开始搭建

  • inquirer 对话库，询问者
  • chalk 终端字符串样式库
  • ora 优雅的终端微调器，可以添加loading之类的
  • download-git-repo 从git上拉取代码
  • shelljs 使用ShellJS操作目录文件
npm install inquirer chalk ora download-git-repo shelljs

自定义一些指令

program
  .option('init', '初始化项目⚙️')
  .option('-i, --info', 'print environment debug logs 🪂');

配置异常处理

写到最后面，因为program.parse()需要解析上面配置的字符串。

try {
  program.parse(process.argv);
} catch (e) {
  console.log(e);
  console.log(`${chalk.red('脚手架出现异常，请联系kk📧')}`);
}

添加问题

使用inquirer添加一些问题

const prompt = [
  {
    type: 'input',
    name: 'description',
    message: '✍️  请输入项目描述',
    filter: val => val
  }, 
  {
    type: 'input',
    name: 'author',
    message: '✍️  请输入作者名',
    filter: val => val
  }, 
  {
    type: 'list',
    name: 'frame',
    message: '✅  请选择使用的框架',
    default: 0,
    choices: [
      {
        name: '默认安装'',
        value: 'all'
      },
      {
        name: '只安装Vue',
        value: 'vue'
      },
      {
        name: '只安装Element',
        value: 'element'
      }
    ]
  }
];

接收指令

program
  .command('create <app-name>')
  .description('create a new project powered by kima')
  .action((cmd) => {
    create(cmd);
  });

const create = async function (name) {
  try {
    const projectName = name;
    const answers = await inquirer.prompt(questions);
    const _pwd = process.cwd();
    const projectPath = `${_pwd}/${projectName}`;
    // 检查项目是否存在
    checkDir(projectPath, projectName);
    const spinner = ora(`☕️ ${chalk.red('模版正在下载中，请稍后 \n')}`).start();
    // 项目模版地址
    const url = 'direct:https://github.com/mobuiin/project-template.git#main';
    // 拉取模版
    download(url, projectPath, { clone: true }, err => {
      if (err) {
        spinner.fail(`${chalk.magenta('下载失败😭')}`);
        process.exit(1);
      } else {
        const fileName = `${projectPath}/package.json`;
        checkDir(fileName, 'package.json');
        const data = fs.readFileSync(fileName).toString();
        const json = JSON.parse(data);
        json.name = projectName;
        json.description = answers.description;
        json.author = answers.author;

        const options = {
          // 这里不方便展示
        };
        options[answers.frame]();
        fs.writeFileSync(fileName, JSON.stringify(json, null, 2), 'utf-8');
        spinner.succeed(`${chalk.magenta('项目创建成功🎉')}`);
      }
    });
  } catch (e) {
    console.log(e);
    console.log(`${chalk.red('脚手架出现异常，请联系kk 📧')}`);
  }
};

补充知识点

  1. process.exit([code]) code只有0 和 1, 没有-1。 默认值为0，代表成功。1 代表失败

  2. 使用download-git-repo 拉取代码时，使用direct + clone为true 时，一定要带上分支。默认分支为master。

  3. 这里修改package.json 使用Node原生的方法，先读取文件，再进行修改。也可以用ShellJS写指令，去替换和操作package.json。

  4. program.parse(process.argv); 要写到最后

到这里就完成的差不多拉，先看看长什么样！

kima create 创建项目

安装并使用

到这里就是发布到私服去拉。发布不用再说了吧，很容易的！！ npm publish 一下就ok拉～

最后全局安装脚手架 即可以使用啦

npm install kima-cli -g
操作流程
Last Updated:
Contributors: kk