node 利用命令行交互生成相應模板

目錄

• readline 實現
• 使用process實現
• 使用 inquirer
• 調用的生成模板方法 (generator 方法)

• 建立時間：2019-10-15
• 測試環境：win10 node-v10.16.1

---

受 vue-cli 初始化項目的啓發，想探究其原理和本身實現一套相似方法，以便在項目中建立公用模板塊。

---

這裏採用三種方式實現

1. node 自帶的 readline
2. 使用process實現
3. 第三方包 inquirer

還有其它實現方式如 commander.js 等，這裏不作具體實現

全部實現方式的完整代碼 github 連接

連接文件結構以下

|-- generatorTemplate.js (生成模板)
|-- readline.js (readline 方式完整代碼)
|-- process.js (process 方式完整代碼)
|-- inquirer.js (inquirer 方式完整代碼)

---

建立的模板示例：根據用戶輸入的不一樣，返回不一樣結果，包括實現了生成一個文件夾,文件夾內容以下

|--template
   |--css
   |--images
   |--js
     |-- index.js

readline 實現

引入 node 自帶的 readline

const readline = require('readline');

初始建立

const rl = readline.createInterface({
    /* 監聽可讀流 */
    input: process.stdin,
    /* 讀取寫入的 可寫流 */
    output: process.stdout,
    /* 提示信息 */ 
    // prompt: '請輸入：'
});

這裏會一直監聽用戶的輸入 當輸入template時 建立模板

rl.on('line', function(input) {
    if(input === 'template') {
        /* 這裏的generator方法參見下方 */
        generatorTemplate.generator()
        rl.close()
    } else if (input === 'pause') {
        rl.pause()
    } else {
        rl.write('please input right: ');
    }
})

完整代碼查看 readline.js

更多用法參考: 官方文檔 readline

使用process實現

當用戶輸入的內容爲template時，就生成模板

const processFn = () => {
    const handleInput = (input) => {
        if(input === 'student') {
            process.stdout.write('there is student here: hew\n')
        } else if(input === 'template') {
            /* 這裏的generator方法參見 */
            generatorTemplate.generator()
            process.stdin.emit('end');
        } else {
            process.stdout.write('some other input message\n')
            process.stdin.emit('end');
        }
    }
    process.stdin.setEncoding('utf-8')
    process.stdin.on('readable', () => {
        let chunk = null;
        while ((chunk = process.stdin.read()) !== null) {         
            if (typeof chunk === 'string') {
                chunk = chunk.slice(0, -2);
                if(chunk) {
                    handleInput(chunk)
                } else {
                    process.stdin.emit('end');
                }
            }
        }
    })
    process.stdin.on('end', () => {
        process.stdout.write('結束\n');
        process.exit()
    })
}

完整代碼查看 process.js

更多用法參考: 官方文檔 process

使用 inquirer

inquirer
    .prompt([
        {
            type: 'confirm',
            name: 'toBeDelivered',
            message: '是否生成模板?',
            default: false
        },
        {
            type: 'checkbox',
            name: 'choices',
            message: 'Is this for delivery?',
            default: 'check',
            choices: ['yes', 'no']
        }
    ])
    .then(answers => {
        console.log(answers);
        /* 輸出值爲：{ toBeDelivered: true, choices: [ 'name' ] } */
        if(answers.toBeDelivered && answers.choices[0] === 'yes') {
            /* 這裏的generator方法參見下方 */
            generatorTemplate.generator();
        } else {
            console.log('不生成模板');
        }
    });

完整代碼查看 inquirer.js

更多用法參考: 官方文檔 inquirer

調用的生成模板方法 (generator 方法)

generator.js

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

const jsStr = 
`const a = '';
const b = 1;
export default {
    a: a,
    b: b
}
`

function generator() {
    fs.mkdirSync(path.join(__dirname, 'template'));
    fs.mkdirSync(path.join(__dirname, 'template', 'css'));
    fs.mkdirSync(path.join(__dirname, 'template', 'js'));
    fs.mkdirSync(path.join(__dirname, 'template', 'images'));
    
    fs.writeFileSync(path.join(__dirname, 'template', 'js', 'index.js'), jsStr, 'utf-8')
}

exports.generator = generator;

歡迎交流 Github