基于plop 自定义前端vue脚手架并上传 npm

基于plop自定义前端vue脚手架，plop是生成脚手架的框架。

plop-vue-cli演示.gif

案例npm地址

https://www.npmjs.com/package/plop-vue-cli

一、安装依赖

安装plop脚手架生成框架

npm i plop --save

安装download-git-repo，能从git等下载代码的工具，用于下载模版。

npm i download-git-repo --save

二、上代码

1、plop 配置（plopfile.js）

plopfile.js文件作为低层节点模块开始其生命周期，该模块输出一个接受该plop对象作为其第一个参数的函数。

module.exports = function (plop) {
    
    // 自定义动作类型
    plop.setActionType('getTemplate', function (answers, config, plop) {
        // 具体实现-省略...
        console.log("下载模版中...");
        return true;
    });

    
    // 注册
    plop.setGenerator('CreateVue', {

        // 描述
        description: 'Create my vue project.',

        // 交互：提问-回答
        prompts: [{
            type: 'input', // 输入值类型：String
            name: 'projectName', // 获取输入值的key
            message: 'Please input your project name.' // 问题描述
        }],

        // 执行操作。
        actions: function(){
            // 项目路径
            var basePath = process.cwd() + '\\\\{{projectName}}\\\\'

            return [{
                // 自定义操作
                type: 'getTemplate', // 执行自定义getTemplate类型 动作
                speed: 'slow' // 执行操作为异步时，添加该字段值
            }, {
                // 新增文件操作
                type: 'add', // 操作类型,(add：新增文件，addMany：新增多个文件，modify：修改文件，append：追加)
                path: "./src/test.js", // 目标文件路径
                templateFile: "./temp/test.hbs", // 模版文件路径
                force: true, // 是否强制执行该动作，（当目标文件已存在时，true则会覆盖该文件， false则不新增 跳过）
                verbose: true //  打印每个操作成功的文件路径
            }]
        }
    });
};

plop对象公开包含setGenerator(name, config)函数的plop api对象。这是用来（等待）为该plopfile创建生成器的函数。当plop从该目录（或任何子目录）在终端上运行时，将会显示prompts这些交互列表，最终执行actions操作列表。

主要方法和参数看plop的官方文档吧

2、下载模版代码（plopfile.js）

模版文件代码也可以放在工程里面，但是建议还是git等平台上，便于后期维护，不至于修改一下模版就发布一次脚手架。
所有这里用到的是download-git-repo工具来从git下载模版代码。

/**
 * 异步获取模版
 * @param {*} path 
 * @param {*} callback 
 */
function getTemplate(path, callback) {
    // clone git代码模版，不加分支时，默认master。
    download('direct:https://github.com/JumplyCode/plop-vue-cli-template.git', path, { clone: true }, callback);
}

3、如何编写模版
如何通过交互获取的值，进行编写模版。编写模版 plop采用的是handlebars.js模版引擎来操作，通过预编译.hbs文件来构建Web模板。
使用方法是加两个花括号{{value}}, handlebars模板会根据当前上下文自动匹配相应的数值、对象甚至是函数。

const PUBLICPATH = 'web-{{projectName}}'; // 上下文

假如交互时，projectName我输入的值是test，则编译后的模版就变成：

const PUBLICPATH = 'web-test'; // 上下文

模版生成之后就会根据actions中的类型（type），或者新增或者修改文件等等。

plop 配置（plopfile.js）【完整】

var download = require('download-git-repo');
var rm = require('rimraf').sync;

const nodeFs = require('fs');

const cfg = require("./config");


/**
 * 异步获取模版
 * @param {*} path 
 * @param {*} callback 
 */
function getTemplate(path, callback) {
    // clone git代码模版，不加分支时，默认master。
    download('direct:https://github.com/JumplyCode/plop-vue-cli-template.git', path, { clone: true }, callback);
}

/**
 * 删除文件
 * @param {String} filePath 文件路径
 */
function deleteFile(filePath) {
    try {
        rm(filePath);
        return true;
        // callback(null, `删除 ${filePath} 成功`)
    } catch (e) {
        return false;
    }
}


/**
 * 交互：询问-输入
 * 1、请输入项目名称（projectName  【String】）
 * 2、是否需要vuex缓存数据（isStore  【Boolean】）
 * 3、是否需要用户信息（isUser  【Boolean】）
 * 4、是否需要代理信息
 */

/**
 * 执行动作
 * 1、下载模版 并创建项目
 * 2、根据填写内容，配置package.json
 * 3、配置vue.config.js
 * 4、配置src/main.js
 * 6、清除.hbs文件
 */
module.exports = function (plop) {
    
    // 自定义动作类型-下载模版
    plop.setActionType('getTemplate', function (answers, config, plop) {
        // do something
        // getTemplate();
        console.log("下载模版中...");
        var path = process.cwd() + "\\" + answers.projectName || "vueDemo";
        return new Promise((resolve, reject) => {
            getTemplate(path, function (error, data) {
                if (error) {
                    reject('模版下载失败：' + error);
                } else {
                    resolve('下载模版完成.');

                }
            });
        });
    });
    // 自定义动作类型-删除hbs文件
    plop.setActionType('deleteHbs', function (answers, config, plop) {
        var basePath = process.cwd() + "\\" + answers.projectName || "vueDemo";
        var isStore = answers.isStore;
        // var isUser = answers.isUser;
        return new Promise((resolve, reject) => {
            try {

                var templates = cfg.templates;
                // 删除hbs文件
                for (var key in templates) {
                    var filePath = basePath + "/" + templates[key];
                    deleteFile(filePath);
                }
                // 如果不需要vuex，则删除store文件
                if (!isStore) {
                    var storePath = basePath + "/src/store"
                    deleteFile(storePath);
                }
                //删除 package-lock.json 缓存文件
                deleteFile(basePath + "/package-lock.json");
                resolve('完成.');
            } catch (e) {
                reject('hbs模版删除：' + error);
            }

        });
    });
    // controller generator
    // 注册plop
    plop.setGenerator('CreateSmyVue', {
         // 描述
        description: 'Create smy vue project.',
        // 交互
        prompts: [{
            type: 'input', // 输入值类型：String
            name: 'projectName', // 获取输入值的key
            message: 'Please input your project name.', // 问题描述
            description: '输入项目名',
            validate: function (input) {
                // Declare function as asynchronous, and save the done callback
                var done = this.async();
                if(input){
                    if(nodeFs.existsSync(process.cwd() + '/' +input)){
                        done("项目名已存在")
                    }
                    done(null,true)
                }else{
                    done("请输入项目名") 
                }
            }
        },{
            type: 'input', // 输入值类型：String
            name: 'projectName_ch', // 获取输入值的key
            message: 'Please input your project name for Chinese.', // 问题描述
            default: "项目名称",
            description: '输入项目的中文名',
        }, {
            type: 'confirm', // 输入值类型：Boolean
            name: 'isStore', // 获取输入值的key
            message: 'Do you need a vuex?',
            default: true,
            description: '是否需要vuex（缓存）',
        },{
            type: 'input', // 输入值类型：Boolean
            name: 'proxy',
            message: 'Please enter your api proxy address.',
            default: "https://www.baidu.com",
            description: '输入后端接口代理地址',
        }],

        // 执行操作
        actions: function(){
            // 项目路径
            var basePath = process.cwd() + '\\\\{{projectName}}\\\\'
            return [{
                type: 'getTemplate', // 执行自定义的类型动作
                speed: 'slow'
            }, {
                type: 'add', // 操作类型：新增文件
                path: basePath + cfg.files.packageJson, // 目标文件
                templateFile: basePath + cfg.templates.packageJson, // 源文件（模版文件）
                force: true, // 是否强制执行该动作，（当目标文件已存在时，true则会覆盖该文件， false则不新增 跳过）
                verbose: true // 打印每个成功添加的文件路径
            }, {
                type: 'add',
                path: basePath + cfg.files.vuConfigJs,
                templateFile: basePath + cfg.templates.vuConfigJs,
                force: true,
                verbose: true
            }, {
                type: 'add',
                path: basePath + cfg.files.mainJs,
                templateFile: basePath + cfg.templates.mainJs,
                force: true,
                verbose: true
            }, {
                type: 'deleteHbs',
                speed: 'slow'
            }]
        }
    });
};

这时候基本完成通过命令行交互生成自己的工程了，只要在plopfile.js配置文件的目录下，执行plop命令，就可以开始生成之路了。

but，但是我想像vue-cli一样，全局安装vue-cli之后，不管在哪执行“vue create hello-world”命令都可以生成vue工程。

三、自定义脚手架成神之路

1、配置package.json

配置package.json，为发布npm做准备。

{
  "name": "plop-vue-cli",
  "version": "0.0.1",
  "main": "plopfile.js",
  "license": "MIT",
  "keywords": [
    "plop-vue-cli",
    "cli",
    "vue",
    "plop"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "plop": "plop",
  },
  "author": "作者",
  "description": "npm描述",
  "bin": {
    "create-plop-vue": "bin/index.js"
  },
  "dependencies": {
    "download-git-repo": "^3.0.2",
    "plop": "^2.7.4"
  }
}

主要字段
name：上传npm后的名称
bin：定义命令行命令，执行该命令行时会执行到对应的脚本文件。命令执行：create-plop-vue，则会执行bin/index.js文件。

2、配置bin/index.js，使其启动plop

#!/usr/bin/env node
const args = process.argv.slice(2);
const {Plop, run} = require('plop');
const argv = require('minimist')(args);
const path = require('path');
Plop.launch({
    cwd: argv.cwd,
    configPath: path.resolve(__dirname, "../plopfile.js"), // 当前依赖包文件路径下的plopfile.js文件
    require: argv.require,
    completion: argv.completion
}, run);

npm发布

1、登录npm

npm login

2、发布代码（更新）

npm publish

基于plop 自定义前端vue脚手架 并上传 npm