手把手教你如何开发一个简单的脚手架

2020-12-26  本文已影响0人  顽皮的雪狐七七

目录

入口文件搭建

  1. 首先npm init创建一个package.json
  2. 在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"
}
  1. 在根目录下创建一个cli.js文件，里面写下面的内容，顶格写注释(必写)
#!/usr/bin/env node
console.log('cli working!')

#!/usr/bin/env node

Node CLI 应用入口文件必须要有这样的文件头
如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755
具体就是通过 chmod 755 cli.js 实现修改

  1. 在当前目录中运行npm link，会自动创建一个package-lock.json文件
{
  "name": "node-cli",
  "version": "1.0.0",
  "lockfileVersion": 1
}
  1. 当前目录运行node-cli 
node-cli
> cli working!

这样入口文件就搭建完毕了~

实现具体业务流程

重温一下脚手架的工作过程：

  • 通过命令行交互询问用户问题(node中发起交互命令我们使用inquirer模块)
  • 根据用户回答的结果生成文件（入口文件中进行逻辑实现）
  1. 完成模板创建
    在根目录下创建templates文件夹，创建两个文件
<!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>

body{
  margin: 0;
  background-color: bisque;
}
  1. 安装两个npm模块
# 用于命令行交互
npm install inquirer
# 用于模板引擎渲染
npm install ejs
  1. 编写cli.js文件
  1. 引入需要的模块
  2. inquirer的prompt方法创建询问，数组里面的一个对象就是对应一个的问题
  3. 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)
      })
    })
  })
})
  1. 创建另一个文件夹，使用命令行
node-cli
> ? Project name? myProject

可以看到在新的项目中，生成了两个文件

<!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>

body{
  margin: 0;
  background-color: bisque;
}

这样我们就完成了一个简单的自制脚手架。

上一篇下一篇

猜你喜欢

热点阅读