目录
- 入口文件搭建
- 实现具体业务流程
入口文件搭建
- 首先
npm init创建一个package.json - 在
package.json里面添加一个配置项中添加bin
{
"name": "node-cli",
"version": "1.0.0",
"description": "",
"main": "index.js",
// 项目入口文件
"bin": "cli.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
- 在根目录下创建一个
cli.js文件，里面写下面的内容，顶格写注释(必写)
#!/usr/bin/env node
console.log('cli working!')
#!/usr/bin/env node
Node CLI应用入口文件必须要有这样的文件头
如果是Linux或者macOS系统下还需要修改此文件的读写权限为755
具体就是通过chmod 755 cli.js实现修改
- 在当前目录中运行
npm link，会自动创建一个package-lock.json文件
{
"name": "node-cli",
"version": "1.0.0",
"lockfileVersion": 1
}
- 当前目录运行
node-cli
node-cli
> cli working!
这样入口文件就搭建完毕了~
实现具体业务流程
重温一下脚手架的工作过程：
- 通过命令行交互询问用户问题(
node中发起交互命令我们使用inquirer模块)- 根据用户回答的结果生成文件（入口文件中进行逻辑实现）
- 完成模板创建
在根目录下创建templates文件夹，创建两个文件
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= name %></title>
</head>
<body>
</body>
</html>
- style.css
body{
margin: 0;
background-color: bisque;
}
- 安装两个npm模块
# 用于命令行交互
npm install inquirer
# 用于模板引擎渲染
npm install ejs
- 编写
cli.js文件
- 引入需要的模块
inquirer的prompt方法创建询问，数组里面的一个对象就是对应一个的问题then里面根据拿到的answers执行任务
#!/usr/bin/env node
// 用于命令行交互
const inquirer = require('inquirer')
// 用户获取文件路径
const path = require('path')
// 用于读取写入文件
const fs = require('fs')
// 用于模板引擎渲染
const ejs = require('ejs')
inquirer.prompt([
{
type:'input',
name:'name',
message: 'Project name?'
}
])
.then(answers => {
console.log(answers)
// 引入path模块，模板目录写绝对路径
const tmplDir = path.join(__dirname, 'templates')
// 目标目录:目标执行的目录，一般在cwd目录
const destDir = process.cwd()
// 引入fs模块，将模板下面文件全部转换到目标目录
fs.readdir(tmplDir, (err, files) => {
if(err) throw err
files.forEach(file => {
// 文件的相对路径
console.log(file) // index.html style.css
// 引入ejs模块
// 通过模板引擎渲染路径对应的文件
// 第一个参数是文件的绝对路径
// 第二个参数是模板引擎工作时候的数据上下文
// 第三个参数是回调函数
ejs.renderFile(path.join(tmplDir, file), answers, (err, result) => {
if(err) throw err
// 成功的话就是已经渲染过的文件
console.log(result)
// 写入文件，目标目录绝对路径，第二个参数是文件内容
fs.writeFileSync(path.join(destDir, file), result)
})
})
})
})
- 创建另一个文件夹，使用命令行
node-cli
> ? Project name? myProject
可以看到在新的项目中，生成了两个文件
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>myProject</title>
</head>
<body>
</body>
</html>
- style.css
body{
margin: 0;
background-color: bisque;
}
这样我们就完成了一个简单的自制脚手架。
网友评论