Node自定义Vue脚手架

初始化项目

npm init -y    // -y  默认配置

配置 `package.json`

"bin": {
    "mun": "index.js"
}

// mun 启动名
// index.js 项目入口

配置 项目入口 第一行添加

#!/usr/bin/env node    // 在当前电脑内,找到node指令,后续代码就可以被Node 代理执行

将 bin 和环境变量进行链接

npm link    // 注意 Mac 用户 需使用 `sudo` 前缀

安装 commander 库

npm install commander

定义显示模块的版本号. 通过 require 导入

commander.version(require("./package.json".version))

解析终端指令. 必须写到最后一行

commander.parse(process.argv)

自定义命令

commander.optoin("-d -dest <dest>", "类似注释类文字输入");
添加了 <dest> 使用 mun -d 后面就必须添加 路径或内容 例:mun -d /src/components

commander.on("--help", function() {
    console.log();
    console.log("提示信息");
    console.log("sauge");
});

获取到命令后面的数据 (重点). 在解析终端命令后打印使用

commander._optionValues.dest    // 如若获取不到,请试试
commander._optionValues.Dest

开始制作

第三方库

recommander        

download-git-repo        // 拉去 git 项目地址

lib

        config

                repo-config.js        // 存放项目地址

        core

                action.js

                create.js

                help.js

创建提示和帮助信息

help.js

const commander = require("commander");

const helpOptions = () => {
    commander.option("-d -dest <dest>", "提示信息");
    commander.option("-m -mun", "m is mun");
}

项目拉取地址

repo-config.js

const vueRepo = "";

module.export = {
    vueRepo
}

命令行执行工具 terminal.js

// 导入 命令行模块
const { spawn } = require("child_process");


const commandSpawn = (...arge) => {
    return new Promise((resolve, reject) => {
        const childProcess = spawn(...arge);

        childProcess.stdout.pipe(process.stdout);
        childProcess.stderr.pipe(process.stdout);

        childProcess.on('close', () => {
            resolve();
        });
    })
}

自定义工具 utils

const ejs = require('ejs');

const compile = (templateName, data) => {
    const templatePosition = `./../template/${templateName}`;
    const templatePath = path.resolve(__dirname, templatePosition);

    return new Promise((resolve, reject) => {
        ejs.renderFile(templatePath, {data}, {}, (err, result) => {
            if (err) {
                console.log(err);
                reject(err);
                return true;
            }  

            resolve();
        })
    })
}

通过 cmomander.js 自定义命令

create.js


const commander = require("commander");
const { createProjectAction } = require("./create");

const createCommander = () => {
    commander.command("create <project> [others..."])
    .description("提示信息")
    .action(() => {
        createProjectAction(createProjectAction);   
    });

    commander.command("addcpn <name> [others...])
    .description("提示信息")
    .action("操作功能")
}

module.export = createCommander

创建 create

create.js

// 将 回掉函数转换为 promise
const { promisify } = require("util");



// 引入 第三方库
const download = require("download-git-repo);
const open = require("open");

// 引入 拉取地址
const { vueRepo } = require("./../config/repo-config");

// 导入 utils 工具
cosnt { commandSpawn } = require("./../utils/terminal");

// 自定义命令
const createProjectAction = async (project) => {
    // 1. clont 项目
    await download = (vueRepo, project, {clone: true})
    // 2. 执行 npm install
    const command = process.platform = 'win32' ? 'npm.cmd' : 'npm';
    commandSpawn('command', ['install'], {'cwd: `./${reject}`};
    
    // 3. 运行 npm run server
    commandSpawn('command', ['run', 'server'], {'cwd: `${reject}`};

    // 4. 打开浏览器
    open('http:localhost:8080/');
}

// 添加组件的 action
const addCpnAction = async (name, dest) => {
    // 1. 拥有对应的 ejs 模版

    // 2. 编译 ejs 模版 result
    
}

module.exports = {
    createProjectAction
};


版权声明:本文为mu0nian原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。