实践:如何开发一个简单的脚手架

12/26/2020 前端工程化Example脚手架
案例

# 入口文件搭建

  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
2
3
4
5
6
7
8
9
10
11
12
13
14
  1. 在根目录下创建一个cli.js文件,里面写下面的内容,顶格写注释(必写)
#!/usr/bin/env node
console.log('cli working!')
1
2

#!/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
2
3
4
5
  1. 当前目录运行node-cli
node-cli
> cli working!
1
2

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

# 实现具体业务流程

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

  • 通过命令行交互询问用户问题(node中发起交互命令我们使用inquirer模块)
  • 根据用户回答的结果生成文件(入口文件中进行逻辑实现)
  1. 完成模板创建 在根目录下创建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>
1
2
3
4
5
6
7
8
9
10
11
  • style.css
body{
  margin: 0;
  background-color: bisque;
}
1
2
3
4
  1. 安装两个npm模块
# 用于命令行交互
npm install inquirer
# 用于模板引擎渲染
npm install ejs
1
2
3
4
  1. 编写cli.js文件
  1. 引入需要的模块
  2. inquirerprompt方法创建询问,数组里面的一个对象就是对应一个的问题
  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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
  1. 创建另一个文件夹,使用命令行
node-cli
> ? Project name? myProject
1
2

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

  • 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>
1
2
3
4
5
6
7
8
9
10
11
  • style.css
body{
  margin: 0;
  background-color: bisque;
}
1
2
3
4

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

更新时间: 2021-09-15 12:03