编程

一个提升开发效率的CLI工具

用到的工具：

commander.js

安装
1
npm install command --save
实现

首先编写一个可执行的脚本文件，定为init-project.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
#!/usr/bin/env node

/**
* Module dependency
*/

const program = require('commander')
const path = require('path')
const vfs = require('vinyl-fs')
const chalk = require('chalk')
const fs = require('fs')

function pathMapObj(type, param) {
    return {
        'index': {
            input: './demo/index.vue',
            output: path.resolve(`./src/entries/${type}/pages/${param}`)
        },
        'actions': {
            input: './demo/action/*',
            output: path.resolve(`./src/entries/${type}/store/${param}`)
        },
        'api': {
            input: './demo/api.js',
            output: path.resolve(`./src/api/${type}`)
        }
    }
}

/**
*
* @param {输入路径} input
* @param {输出路径} output
* @param {类型} type
* @param {是否需要重命名} needRename
* @param {模块名} moduleName
*/

function readAndWrite(input, output, type, needRename, moduleName) {
    vfs.src([input])
    .pipe(vfs.dest(output, {}))
    .on('end', function () {
        console.log(chalk.green(`initializing ${type} file finished......`))
        if (needRename) {
            fs.renameSync(`${output}/api.js`, `${output}/${moduleName}.js`)
        }
    })
    .resume()
}
program.version('1.0.0')
    .option('-t --teacher [name]', 'init the teacher component')
    .option('-s --student [name]', 'init the student component')
    .option('-m --manager [name]', 'init the manager component')
    .parse(process.argv)
let param = program.teacher || program.student || program.manager
if (param) {
    let type = null;
    if (program.teacher) {
        type = 'teacher'
    } else if (program.student) {
        type = 'student'
    } else if (program.manager) {
        type = 'manager'
    }
    if (param.toString() === 'true') {
        console.log(chalk.red('格式错误！缺少组件名参数'))
        return
    }
    console.log(`The ${chalk.blue(param)} component will be inited on ${chalk.yellow(__dirname)}`)
    console.log(chalk.yellow('initializing specified component......'))\

    readAndWrite(pathMapObj(type, param).index.input, pathMapObj(type, param).index.output, 'index')
    readAndWrite(pathMapObj(type, param).actions.input, pathMapObj(type, param).actions.output, 'actions')
    readAndWrite(pathMapObj(type, param).api.input, pathMapObj(type, param).api.output, 'api', true, param)

} else {
    console.log(chalk.red('格式错误！正确命令举例：node ./bin/init-project -t component-name'))
}

上面文件主要功能为读取demo文件夹的样例模板文件，并按照类型和模块名进行相应路径的输出，以达到自动初始化模块开发的功能，免去每次开发新功能时创建多个重复文件的苦恼

windows下存在问题，不识别脚本声明语句#!/usr/bin/env node，导致只能使用node来执行代码

在同级demo文件夹下放入要生成的样例文件。目前有四个文件，主要页面vue文件，action与store vuex所需文件，api（使用axio进行访问）文件。