Skip to content

Latest commit

 

History

History
241 lines (192 loc) · 6.43 KB

2.1.5.3 cli 用到的 npm 库，demo.md

File metadata and controls

241 lines (192 loc) · 6.43 KB

cli 用到的 npm 库

可能会用到的库

"dependencies": {
        "chalk": "^2.4.1",
        "clear": "^0.1.0",
        "clui": "^0.3.6",
        "commander": "^2.17.1",
        "configstore": "^4.0.0",
        "download-git-repo": "^1.0.2",
        "figlet": "^1.2.0",
        "inquirer": "^6.1.0",
        "lodash": "^4.17.10",
        "minimist": "^1.2.0",
        "mongoose": "^5.2.7",
        "ora": "^3.0.0",
        "shelljs": "^0.8.2",
        "simple-git": "^1.96.0",
        "touch": "^3.1.0",
        "fs-extra": "^7.0.0",
        "string": "^3.3.3",
        "log-symbols": "*"
    }

库说明

#! /usr/bin/env node是指定这个文件使用node执行。

需要安装的模块npm i commander download-git-repo chalk ora --save：

commander可以解析用户输入的命令。

download-git-repo拉取github上的文件。

chalk 改变输出文字的颜色

ora小图标（loading、succeed、warn等）

clear 清空终端屏幕

var clear = require('clear');
clear();

clui ：Node.js的命令行UI工具包

figlet： 打印 艺术字体的，类似:

  ____   _           _   _
  / ___| (_)  _ __   (_) | |_
 | |  _  | | | '_ \  | | | __|
 | |_| | | | | | | | | | | |_
  \____| |_| |_| |_| |_|  \__|

inquirer： 一个提供交互式命令的npm包如：输入，单选，多选 ,列表，确认

shelljs: Node.js中 unix shell 命令

configstore： 轻松地加载和保存配置工具

const Configstore = require('configstore');
const pkg = require('./package.json');

// create a Configstore instance with an unique ID e.g.
// Package name and optionally some default values
const conf = new Configstore(pkg.name, {foo: 'bar'});

console.log(conf.get('foo'));
//=> 'bar'

conf.set('awesome', true);
console.log(conf.get('awesome'))

log-symbols，可以在终端上显示出 √ 或 × 等的图标。

demo

#!/usr/bin/env node

const path = require('path');
const fs = require('fs');

const program = require('commander');
const inquirer = require('inquirer')
const download = require('download-git-repo');
const chalk = require('chalk');
const ora = require('ora');

const clear = require('clear');
const figlet = require('figlet');


clear();
console.log(
    chalk.yellow(
        figlet.textSync('Ginit', { horizontalLayout: 'full' })
    )
);

program
    .version('0.1.0')
    .option('i, init', '初始化x-build项目')

program
    .parse(process.argv);


const listQuestion = {
    type: 'list',
    message: '请选择一个框架:',
    name: 'frame',
    choices: [
        "Vue",
        "React",
        "Angular"
    ],
    filter: function(val) { // 使用filter将回答变为小写
        return val.toLowerCase();
    }
};

const nameQuestion = {
    type: 'input',
    message: `项目名称: `,
    name: 'name',
    default: 'x-build'
};

const versionQuestion = {
    type: 'input',
    message: `初始版本: `,
    name: 'version',
    default: '0.0.1'
};

const portQuestion = {
    type: 'input',
    message: `server端口: `,
    name: 'port',
    default: '8080'
};

const templateQuestion = {
    type: 'confirm',
    message: `使用pug(jade)模版引擎? `,
    name: 'template',
    default: true
};

const remQuestion = {
    type: 'confirm',
    message: `使用px2rem布局? `,
    name: 'rem',
    default: true
};

console.log(program)

if (program.init) {
    console.info('');
    inquirer.prompt([
        listQuestion,
        nameQuestion,
        versionQuestion,
        portQuestion,
        templateQuestion,
        remQuestion
    ]).then(function(answers) {
        console.log(answers);
        
        const spinner = ora('正在从github下载x-build').start();
        download('codexu/x-build', answers.name, function(err) {
            if (!err) {
                spinner.clear()
                console.info('');
                console.info(chalk.green('-----------------------------------------------------'));
                console.info('');
                spinner.succeed(['项目创建成功,请继续进行以下操作:'])
                console.info('');
                console.info(chalk.cyan(` -  cd ${answers.name}`));
                console.info(chalk.cyan(` -  npm install / yarn`));
                console.info(chalk.cyan(` -  npm start / npm run dev`));
                console.info('');
                console.info(chalk.gray(`devServer: http://localhost:${answers.port}`));
                console.info('');
                console.info(chalk.gray('参考文档: https://github.com/codexu/x-build'));
                console.info('');
                console.info(chalk.green('-----------------------------------------------------'));
                console.info('');

                if (answers.template === true) {
                    fs.unlinkSync(`${process.cwd()}/${answers.name}/src/index.html`);
                } else {
                    fs.unlinkSync(`${process.cwd()}/${answers.name}/index.pug`);
                    fs.unlinkSync(`${process.cwd()}/${answers.name}/src/app.pug`);
                }

                fs.readFile(`${process.cwd()}/${answers.name}/package.json`, (err, data) => {
                    if (err) throw err;
                    let _data = JSON.parse(data.toString())
                    _data.name = answers.name
                    _data.version = answers.version
                    _data.port = answers.port
                    _data.template = answers.template ? "pug" : "html"
                    _data.rem = answers.rem
                    let str = JSON.stringify(_data, null, 4);
                    fs.writeFile(`${process.cwd()}/${answers.name}/package.json`, str, function(err) {
                        if (err) throw err;
                        process.exit()
                    })
                });
            } else {
                spinner.warn(['发生错误，请在https://github.com/codexu，Issues留言'])
                process.exit()
            }
        })
    });
}

使用 metalsmith 处理模板

它就是一个静态网站生成器，可以用在批量处理模板的场景，类似的工具包还有Wintersmith、Assemble、Hexo。它最大的一个特点就是EVERYTHING IS PLUGIN，所以，metalsmith本质上就是一个胶水框架，通过黏合各种插件来完成生产工作。

参考