脚手架工具实际上是一个node cli应用,创建脚手架工具实际上就是创建cli应用
(1)在项目目录下初始化package.json
yarn init
(2)vscode打开这个目录,在package.json中添加bin字段,用来指定入口文件
"bin":"cli.js"
添加之后是这个样子滴
{ "name": "sample-scaffolding", "version": "1.0.0", "main": "index.js", "bin": "cli.js", "license": "MIT" }
(3)在根目录下新建cli.js
#!/usr/bin/env node // Node CLI应用入口文件必须要有这样的文件头 // 如果是Linux或者是macOS系统下还需要修改此we年的读写权限为755 // 具体就是通过chmon755 cli.js实现修改 console.log(‘cli working‘)
(4)在命令行通过yarn link的方式将这个模块link到全局
yarn link
(5)在命令行当中使用sample-scaffolding执行cli.js,如果命令行输出结果为"cli working",说明执行成功
sample-scaffolding
(6)使用inquirer进行命令行交互,安装inquirer
yarn add inquirer
(7)脚手架的工作过程
cli.js
//1、通过命令行交互询问用户问题 //2、根据用户回答的结果生成文件 const inquirer = require(‘inquirer‘); inquirer.prompt([ { type:‘input‘, name:‘name‘, message:‘Project name‘ } ]).then(answer=>{ console.log(answer); })
(8)在命令行执行sample-scaffolding,能返回结果说明执行成功
sample-scaffolding
(9)新建模板目录templates/index.html
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> <%= name %> </title> </head> <body> </body> </html>
(10)新建templates/style.css(第二个模板)
style.css
body { margin: 0; background-color: #f8f9fb; }
(11)需要用到通过模板引擎渲染文件,所以安装模板引擎
// 这里安装的是ejs模板引擎
yarn add ejs
(11)创建一个新的文件目录demo
(12)在新的文件目录命令行下执行sample-scaffolding,将会在demo目录下生成模板文件渲染出来的文件
(13)完整编码
cli.js
#!/usr/bin/env node // Node CLI应用入口文件必须要有这样的文件头 // 如果是Linux或者是macOS系统下还需要修改此we年的读写权限为755 // 具体就是通过chmon755 cli.js实现修改 console.log(‘cli working‘) //脚手架的工作过程: //1、通过命令行交互询问用户问题 //2、根据用户回答的结果生成文件 const fs = require(‘fs‘); const path = require(‘path‘); // 引入模板引擎 const ejs = require(‘ejs‘); const inquirer = require(‘inquirer‘); inquirer.prompt([ { type:‘input‘, name:‘name‘, message:‘Project name‘ } ]).then(answer=>{ // console.log(answer); // 根据用户回答的结果生成文件 // 模板目录 const tmplDir = path.join(__dirname,‘templates‘); // 目标目录 const destDir = process.cwd(); //将模板下的文件全部转换到目标目录 fs.readdir(tmplDir,(err,files) => { if(err) throw err; // 遍历每一个文件 files.forEach(file => { // 通过模板引擎渲染文件 ejs.renderFile(path.join(tmplDir,file),answer,(err,result)=>{ if(err) throw err // 将结果写入到目标文件目录 fs.writeFileSync(path.join(destDir,file),result) }) }) }) })
原文:https://www.cnblogs.com/phantomyy/p/14432028.html