Skip to content

qld-cf/maple-react-cli

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 

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