Node 开发npm脚手架（类似vue-cli）
npm install tengyu-cli -g
源码已经上传码云：/bingtengaoyu/tengyu_cli.git
一.构建脚手架思路
构建脚手架的目的
为了快速构建项目，修改配置信息，达到自动化前端工程的目的
思路：两种方式
第一种方式：从GitHub拉取代码，修改配置，需要在GitHub提供一个可供下载的模板，完成初始化，下载后解压zip包，然后删除zip包，修改配置文件，配置代理，下载依赖，启动项目；
第二种方式：将压缩后的zip模板放到服务器上，脚手架从服务器下载对应的模板，根据提示输入配置信息，完成初始化，下载后解压zip包，然后删除zip包，修改配置文件，配置代理，下载依赖，启动项目
二. 初始化项目
npm init
三. 修改package.json入口文件
{"name": "tengyu-cli","version": "1.0.0","description": "","main": "index.js", // 入口文件"bin": {"tengyu": "index.js"},"scripts": {"serve": "node index.js","dev": "node index.js","start": "node index.js","test": "echo \"Error: no test specified\" && exit 1"},"author": "gengbingbing","license": "ISC","dependencies": {"chalk": "^3.0.0","commander": "^4.1.1","cross-spawn": "^7.0.1","download-git-repo": "^3.0.2","handlebars": "^4.7.3","inquirer": "^7.0.4","log-symbols": "^3.0.0","ora": "^4.0.3","request": "^2.88.2"}}
四. 下载依赖
npm install
五. 开始编写脚手架（直接上源码）
index.js
#!/usr/bin/env nodeconst program = require('commander'); //设计命令行const download = require('download-git-repo'); //github仓库下载const inquirer = require('inquirer'); //命令行答询const handlebars = require('handlebars'); //修改字符const ora = require('ora');//命令行中加载状态标识const chalk = require('chalk'); //命令行输出字符颜色const logSymbols = require('log-symbols'); //命令行输出符号const fs = require('fs');const request = require('request');const { resolve } = require("path");const install = require("./utils/install");console.log(chalk.green(`tengyu cli 命令------------------------------------------------------------tengyu init <template name> projectName | 初始化项目 tengyu -V | 查看版本号 tengyu -h | 查看帮助 tengyu list| 查看模板列表 tengyu download | 下载zip模板 ------------------------------------------------------------`));// 可用模板const templates = {'react-npm-template': {url: '/bingtengaoyu/reactAntd',downloadUrl: ':bingtengaoyu/reactAntd#master',description: 'react基础模板'},'vue-tools': {url: '/bingtengaoyu/vueTools',downloadUrl: ':bingtengaoyu/vueTools#master',description: 'vue常用组件'}}// tengyu -V|--versionprogram.version('1.0.0'); // -v|--version时输出版本号0.1.0// tengyu init <template> <project>mand('init <template> <project>').description('初始化项目模板').action((templateName, projectName) => {console.log(templateName, templates);let downloadUrl = templates[templateName].downloadUrl;//下载github项目，下载墙loading提示const spinner = ora('正在下载模板...').start();//第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clonedownload(downloadUrl, projectName, { clone: true }, err => {if (err) {console.log(logSymbols.error, chalk.red('项目模板下载失败\n 只能下载list列表中有的模板'));console.log(err);} else {spinner.succeed('项目模板下载成功');//命令行答询inquirer.prompt([{type: 'input',name: 'appid',message: '请输入appid',default: ''},{type: 'input',name: 'name',message: '请输入项目名称',default: projectName},{type: 'input',name: 'description',message: '请输入项目简介',default: ''},{type: 'input',name: 'author',message: '请输入作者名称',default: ''}]).then(answers => {//根据命令行答询结果修改package.json文件let packsgeContent = fs.readFileSync(`${projectName}/package.json`, 'utf8');let packageResult = pile(packsgeContent)(answers);fs.writeFileSync(`${projectName}/package.json`, packageResult);console.log(packageResult)fs.writeFileSync(`${projectName}/config.js`, `module.exports = ${JSON.stringify(answers)}`);console.log(logSymbols.success, chalk.green('项目初始化成功，开始下载依赖...'));install({ cwd: `${resolve('./')}/${projectName}` }).then(data => {console.log(logSymbols.success, chalk.green('项目依赖下载成功！'));});//用chalk和log-symbols改变命令行输出样式})}})})// 下载zip模板mand('download').description('初始化项目模板').action((templateName, projectName) => {inquirer.prompt([{type: 'input',name: 'project_name',message: '请输入项目名称',default: 'tengyu-template'},{type: 'list',name: 'template_name',message: '请选择需要下载的模板',choices: ['react快速开发模板','vue工具集'],default: 'react-npm-template'}]).then(answers => {let url = ''switch (answers.template_name) {case 'react快速开发模板':url = templates['react-npm-template'].url;break;case 'vue工具集':url = templates['vue-tools'].url;break;default:url = templates['react-npm-template'].url}function downloadFile(uri, fileName, callback) {var stream = fs.createWriteStream(fileName);request(uri).pipe(stream).on('close', callback);}downloadFile(url, `${answers.project_name}.zip`, function () {console.log(logSymbols.success, chalk.green(`${answers.template_name}下载完毕！`));return});})})// tengyu mand('list').description('查看所有可用模板').action(() => {console.log(chalk.green(`tengyu 模板-----------------------------------------------react-npm-template react快速开发模板 vue-tools vue工具集-----------------------------------------------`))})program.parse(process.argv);
util-install.js文件（用于下载依赖）
使用cross-spawn模块进行自定义cmd命令的编写
const spawn = require("cross-spawn");module.exports = function install(options) {const cwd = options.cwd || process.cwd();return new Promise((resolve, reject) => {const command = options.isYarn ? "yarn" : "npm";const args = ["install", "--save", "--save-exact", "--loglevel", "error"];const child = spawn(command, args, { cwd, stdio: ["pipe", process.stdout, process.stderr] });child.once("close", code => {if (code !== 0) {reject({command: `${command} ${args.join(" ")}`});return;}resolve();});child.once("error", reject);});};
至此一个简单的脚手架已经开发完成
npm link之后即可在本地进行试运行了
六. 发布npm库
设置自己的npm代理，不要设置为了淘宝代理等；
去npm注册自己的账号；
上传自己的npm脚手架
npm login // 登录npm publish // 推送自己的脚手架到npm库
大功告成，可以下载自己的npm插件了。
