Skip to content

qld-cf/maple-react-cli

Folders and files

NameName
Last commit message
Last commit date

Latest commit

0c10ed9 · Feb 21, 2022

History

14 Commits
Feb 25, 2020
Feb 25, 2020
Nov 5, 2020
Feb 24, 2020
Feb 21, 2022
Nov 5, 2020

Repository files navigation

基于nodejs的项目快速初始化 脚手架

快速拉取代码,下载依赖,运行项目一气呵成

使用

> npm i -g maple-react-cli

> maple-react-cli

? 请选择您接下来的操作 选择模板类型
? 选一个APP类型来初始化您的项目~ react-web-tpl
✔ 初始化中..
✔ 准备拉取代码...
? 请输入您本地初始化的项目名~ dd
✔ 拉取代码成功
✔ 安装依赖成功~
? 是否运行项目? yes
恭喜~项目启动成功~请稍候...

模板 1 详情: react-web-tpl 模板 2 详情: electron-react-tpl

实现

一、准备模板

模板 1 详情: react-web-tpl

一般放到 github repos 即可

二、具体的 cli 工具实现流程

前提准备
yarn add commander inquirer ora axios
  1. 创建基本文件和目录结构

mkdir maple-react-cli && cd maple-react-cli && npm init // 创建目录
mkdir bin && cd bin // 创建bin文件夹
touch maple.js // 创建指令文件
  1. 修改 package.json, 添加入口
  "bin": {
    "maple-react-cli": "./bin/maple.js" // 关键命令行
  },
  1. maple.js

#!/usr/bin/env node // shell要以node方式来解析文件
require('../src');

  1. 准备如下的目录结构,进行命令行解析和构建,下载等
|————bin --------------------- 命令行入口
| |————maple.js  -------------
|————config ------------------ 配置
| |————index.js  ------------- github api
|————src ---------------------
| |————command  --------------
| | |————init.js  ------------ 命令行解析
| |————tools  ---------------- 工具
| | |————git.js  ------------- 获取模板信息
| | |————request.js  --------- 请求封装
| |————index.js  ------------- 解析入口
|————README.md  --------------- 项目描述文件
  1. src/index.js
// 接收命令行参数, 提供基础信息提示功能
const commander = require('commander');

// 内部模块
const { existsSync } = require('fs');
const { resolve } = require('path');
const { version } = require('../package.json');

// 命令行颜色
require('colors');

commander.version(version)
  .parse(process.argv);

const [todo = ''] = commander.args;

if (existsSync(resolve(__dirname, `command/${todo}.js`))) {
  require(`./command/${todo}.js`);
} else {
  console.log(`未知指令/Valid - 加上init来初始化项目吧/Please add 'init' after the command`.red,
  );
  process.exit(-1);
}

  1. 配置 config/index.js
//  github api 基础地址
exports.baseURL = 'https://api.github.com';
// github 组织名称
exports.orgName = 'qld-cf'; // 可改为你的仓库
exports.token = ''; // 避免请求限流

  1. 获取 github api token

github -> settings -> developer settings -> personal access tokens -> generage new token

拷贝后到配置文件,token 最好设置只读

  1. command/init.js
命令和文件名一致,便于拓展其他命令和解耦
...
    // 获取所在项目组的所有可开发项目列表
    try {
      getProListLoad = this.getProList.start();
      repos = await this.git.getProjectList();
      getProListLoad.succeed('获取项目列表成功/Get repos successfully...');
    } catch (error) {
      console.log(error);
      getProListLoad.fail('获取项目列表失败/Get repos failed...');
      process.exit(-1);
    }

    // 向用户咨询他想要开发的项目
    if (repos.length === 0) {
      console.log('\n可以开发的项目数为 0, 肯定是配置错啦~~\n'.red);
      process.exit(-1);
    }
    const choices = repos.map(({ name }) => name);
    const questions = [
      {
        type: 'list',
        name: 'repo',
        message: '请选择你想要的模板/Choose template',
        choices,
      },
    ];
    const { repo } = await this.inquirer.prompt(questions);
...
工具类可执行查看功能,主要封装接口;
至此,工具初始化流程结束

三、 cli 运行

  • 本地测试

// 测试软链到全局使用
> npm i
> npm link // 软链到全局npm,就可以使用maple-react-cli
> maple-react-cli init
// 项目内测试
> node bin/maple.js

推送到 npmjs

  1. 登录 npmjs
  2. 还原镜像,避免推送错误
npm config set registry http://registry.npmjs.org
  1. 按照提示添加 npmjs 用户信息: npm adduser
  2. npm publish
  3. 去 npmjs 搜索 maple-react-cli

使用

npm i -g maple-react-cli

maple-react-cli

  • 选择模板 'react-ts-template'
  • 输入自定义的项目名
  • 创建模板成功
githubApi 请求错误
  1. 403: 添加 token
  2. 401: 不要将 token push 到仓库,本地测试用;但是推送到 npm 需要 token

修改指定下载的仓库名

// src/tools/git.js
const { gitRepo } = require('../package.json');
/**
  * 获取指定项目
  * @param {String} repo 项目名称
  */
getProjectVersions(repo) {
  return request(`search/repositories?q=${repo}+user:${gitRepo}`);
}

github

About

nodejs cli工具

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published