Why is scaffolding needed? How to build scaffolding? The following article introduces the steps for building scaffolding on node. I hope it will be helpful to everyone!
Create a new mycli folder (the file name can be customized), create a new bin file below, create a new bin file index.js, this index.js is the entry file, index.js is added to the header of the file #!/usr/bin/env nodecode
Generate the package.json file. At this time, there will be a bin configuration object. The key value is the global scaffolding name, and the value is the index.js# of the entry file bin file. ##path.
npm init -y
npm install
mycli, the link is successful.
//命令可以将一个任意位置的npm包链接到全局执行环境，从而在任意位置使用命令行都可以直接运行该npm包。 npm link
npm install commander inquirer@8.2.5 download-git-repo chalk@4.1.2 ora@5.4.1 figlet handlebars
: Command line tool, with which we can read Take the command line command and know what the user wants to do: An interactive command line tool that provides users with a beautiful interface and a way to ask questions: Download the remote template tool, responsible for downloading the template project of the remote warehouse : Color plug-in, used to modify the command line output style, The info and error logs are distinguished by color, which is clear and intuitive : Used to display the loading effect, similar to the loading effect of the front-end page, for time-consuming operations such as downloading templates. With the loading effect, the user can be prompted that it is in progress, please wait patiently: Hollow font styleDebuggingcommander.js is a tool used to build node’s command line program so that Ability to run node scripts on the global command line using custom instructions. Originally, we could only run the script through node xxx.js in the root directory of the file where the script is located. After building the command line program through commander, we can directly run it in any directory, such as the desktop, such as the user directory. Enter the custom command to run the script directly, which is easier.
#!/usr/bin/env node
//就是解决了不同的用户node路径不同的问题，可以让系统动态的去查找node来执行你的脚本文件。
//node.js内置了对命令行操作的支持，在 package.json 中的 bin 字段可以定义命令名和关联的执行文件。
const program = require("commander")
program.version('1.1.0')
function getFramwork (val) {
console.log(val);
}
const myhelp = function (program) {
program.option('-f --framwork <framwork>', '设置框架', getFramwork)
}
const createProgress = function (program) {
program.command('create <progress> [other...]')
.alias('crt')
.description('创建项目')
.action((progress, arg) => {
console.log(progress, arg);
})
}
myhelp(program);
createProgress(program);
program.parse(process.argv)
// 补充
.parse()
// 作用就是解析，参数就是要解析的字符串，一般使用时参数就是用process.argv，就是用户输入参数mycli to output all commands~~
##2.2 download-git-repo
#!/usr/bin/env node
const download = require('download-git-repo');
download('direct:https://gitlab.com/flippidippi/download-git-repo-fixture.git', "xxx", { clone: true }, (err) => {
console.log(err ? 'Error' : 'Success')
}) and you will see a xxx file generated under the file
##2.3 Inquirer (command interaction)
inquirer is a library that allows us to easily perform various terminal interactive behaviors. inquirer mainly provides three methods to facilitate us to register questions
prompt(questions) => promise#!/usr/bin/env node
const inquirer = require("inquirer")
function getUsername() {
return inquirer
.prompt([
{
type: "input",
name: "progress",
message: "请输入项目名称",
default: "progress",
filter(input) {
return input.trim()
},
validate(input) {
return input.length > 0
},
},
])
.then((answer) => {
console.log(answer)
})
}
function getFramework() {
return inquirer
.prompt([
{
type: "list",
name: "framework",
choices: [
"express",
new inquirer.Separator(),
"koa",
new inquirer.Separator(),
"egg",
],
message: "请选择你所使用的框架",
},
])
.then((answer) => {
console.log(answer)
})
}
function getSelect() {
return inquirer
.prompt([
{
type: "checkbox",
name: "userndasde",
choices: [
{ name: "pr", disabled: true },
{ name: "oa", checked: true },
"gg",
],
message: "需要的验证格式",
// default: ["oa"],
},
])
.then((answer) => {
console.log(answer)
})
}
async function init() {
await getSelect()
await getUsername()
await getFramework()
}
init()Note: Note that different versions have different introduction methods. Here we use ora
chalk (version 4.1.2)
const ora = require("ora")
const chalk = require("chalk")
const spinner = ora("Loading unicorns").start()
spinner.text = chalk.blue("下载中~~~~~~")
setTimeout(() => {
spinner.succeed(chalk.red("下载成功!"))
spinner.fail("下载失败!")
spinner.warn("警告！")
}, 2000)镂空文字调试器地址：地址
figlet旨在完全实现JavaScript中的FIGfont规范。它可以在浏览器和Node.js中工作。
figlet.text( description,{options},callback(err,data){}) 这个是异步的会被description：需要格式化的字符串
options：参数配置
Font：字体，Default value:Standard；horizontalLayout：布局，Default value:default; Values:{default,full,fitted};verticalLayout:垂直布局, Default value:default; Values:{defalut,full,fitted,controlled smushing,universal smushing};Width:宽度;whitespaceBreak:换行(Boolean); Default value:falsecallback(err,data):回调
const figlet = require("figlet")
const chalk = require("chalk")
//简单函数
function handleAsync(params) {
const JAVASCRIPT = figlet.textSync(
"NODEJS",
{
font: "big",
horizontalLayout: "fitted",
verticalLayout: "controlled smushing",
width: 600,
whitespaceBreak: true,
},
function (err, data) {
if (err) {
console.log("Something went wrong...")
console.dir(err)
return
}
console.log(data)
}
)
console.log(chalk.blue.bold(JAVASCRIPT))
}
handleAsync()
bin/index.js#!/usr/bin/env node
console.log("adas");
require("../lib/commander/index.js")lib/commonder/index.jsconst program = require("commander")
const init = require('../inquirer/index');
const downloadFun = require("../core/download.js");
program.version('1.1.0')
function getFramwork (val) {
console.log(val);
}
const myhelp = function (program) {
program.option('-f --framwork <framork> [other...]', '设置框架', getFramwork)
}
const createProgress = function (program) {
program.command('create <progress> [other...]')
.alias('crt')
.description('创建项目')
.action((progress, arg) => {
init();
})
}
const downloadUrl = function (program) {
program.command('download <url> [...other]')
.description('下载内容')
.action((url, ...args) => {
console.log(args);
downloadFun(url, args[1].args[1])
})
}
myhelp(program);
downloadUrl(program);
createProgress(program)
program.parse(process.argv)lib/core/action.js (package.json重写)const fs = require('fs');
const path = require("path");
const handlebars = require("handlebars");
function modifyPackageJson (options) {
let downloadPath = options.projectName;
const packagePath = path.join(downloadPath, 'package.json');
console.log(packagePath, "packagePath");
//判断是否存在package.json文件
if (fs.existsSync(packagePath)) {
let content = fs.readFileSync(packagePath).toString();
//判断是否选择了eslint
if (options.isIslint) {
let targetContent = JSON.parse(content);
content = JSON.stringify(targetContent);
targetContent.dependencies.eslint = "^1.0.0";
console.log("content", content);
}
//写入模板
const template = handlebars.compile(content);
const param = { name: options.projectName };
const result = template(param);
//重新写入package.json文件
fs.writeFileSync(packagePath, result);
console.log('modify package.json complate');
} else {
throw new Error('no package.json');
}
}
module.exports = modifyPackageJsonlib/core/download.js const download = require('download-git-repo');
const ora = require("ora");
const chalk = require("chalk");
const figlet = require("figlet");
const modifyPackageJson = require("./action")
function handleAsync (params) {
const JAVASCRIPT = figlet.textSync('JAVASCRIPT', {
font: 'big',
horizontalLayout: 'fitted',
verticalLayout: 'controlled smushing',
width: 600,
whitespaceBreak: true
}, function (err, data) {
if (err) {
console.log('Something went wrong...');
console.dir(err);
return;
}
console.log(data);
});
console.log(chalk.blue.bold(JAVASCRIPT));
}
const downloadFun = (url, option) => {
const spinner = ora("Loading unicorns").start()
spinner.text = chalk.blue("下载中");
download(url, option.projectName, { clone: true }, function (err) {
if (err) {
spinner.fail("下载失败!");
handleAsync()
} else {
spinner.succeed(chalk.red("下载成功!"))
console.log(chalk.blue(`cd ${option.projectName}`))
console.log(chalk.red("npm install"))
console.log(chalk.yellow(`npm run dev`))
modifyPackageJson(option)
handleAsync()
}
})
}
module.exports = downloadFun;inquire/index.js 注意frameworkConfig写自己的gitlab仓库地址 const inquirer = require("inquirer");
const downloadFun = require("../core/download.js");
const frameworkConfig = {
front: "https://gitlab.com/flippidippi/download-git-repo-fixture.git",
manager: "https://gitlab.com/flippidippi/download-git-repo-fixture.git"
}
const config = {};
function getFramework () {
return inquirer.prompt([
{
type: 'list',
name: 'framework',
choices: ["front", "manager"],
message: "请选择你所使用的框架"
}
]).then((answer) => {
return answer.framework;
})
}
function getProjectName () {
return inquirer.prompt([
{
type: 'input',
name: 'projectName',
message: '项目名称',
filter (input) {
return input.trim();
},
}
]).then((answer) => {
console.log(answer, "FDsfs");
return answer.projectName;
})
}
function getIsEslint () {
return inquirer.prompt([
{
type: 'confirm',
name: 'isIslint',
message: '是否使用eslint校验格式?'
}
]).then((answer) => {
return answer.isIslint;
})
}
async function init () {
config.projectName = await getProjectName();
config.framework = await getFramework();
config.isIslint = await getIsEslint();
let url = config.framework == "front" ? frameworkConfig.front : frameworkConfig.manager;
downloadFun("direct:" + url, config);
}
module.exports = init;更多node相关知识，请访问：nodejs 教程！
The above is the detailed content of Why is scaffolding needed? Detailed explanation of the steps to build scaffolding in node. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
