30行代码让你构建自己的脚手架工具--保姆级教程

x33g5p2x  于2022-03-13 转载在 其他  
字(1.2k)|赞(0)|评价(0)|浏览(424)

1. 创建一个文件夹

首先创建一个文件夹,并且使用 npm init -y 来初始化项目。
然后下载ejs和inquirer。
现在项目长这样:

2. 创建一个js文件

在根目录下创建一个js文件,我这里命名为cli.js,并且在第一行加入**#!/usr/bin/env node**。

3. 修改package.json的内容

在package.json 里面增加 “bin”: “cli.js”,注意这里要和你新建的js文件名字要相同。

4. 创建你的模板文件

在根目录创建template文件夹,里面放入脚手架需要的文件,我这里只使用了一个index.js。里面有需要被替换的内容,可以使用**<%= 变量名 %>**替换。

5. 编写cli.js

#!/usr/bin/env node

const fs = require('fs');
const path = require('path');
const inquirer = require('inquirer');
const ejs = require('ejs');

inquirer.prompt([
  {
    type: 'input',
    name: 'name',
    message: 'project name'
  }
]).then(answer => {
  // console.log(answer);
  const tmpDir = path.join(__dirname, 'templates');  // 模板路径
  const aimDir = process.cwd();   // 当前命令行的路径

  fs.readdir(tmpDir, (err, res) => {
    if (err) throw err;

    res.forEach(file => {
      ejs.renderFile(path.join(tmpDir, file), answer, (err, result) => {
        if (err) throw err;
        fs.writeFileSync(path.join(aimDir, file), result);
      })
    })
  })
})
  1. 首先导入fs、path、ejs和inquirer。
  2. 接下来定义inquirer.prompt,这是一个用于命令行提示和获取命令行输入的方法。如果有多个输入或提示,可以用数组存储,每个数组里面的对象分别对应类型、变量名、提示信息。
  3. 当获取到输入后会有一个异步回调函数,获取到用户在命令行输入的信息。
  4. 接下来获取到模板路径和命令行路径。
  5. 接下来读取到模板的路径并且读取模板里面的文件,将模板中的文件使用ejs进行写入到用户的路径。

6. 执行命令

前期工作准备好了,接下来我们来测试。

  1. 首先在命令行执行 npm link,将cli.js放入环境。

  1. 然后新建一个文件夹用于测试
  2. 在新建文件夹的终端输入你之前创建的文件夹名,比如我之前的文件夹名字是myclis
  3. 接下来输入信息即可,你可以看到你当前的文件自动根据模板创建了文件。并且里面的name被替换成了你输入的信息。

最后

是不是很简单呢?30行代码就拥有了你自己的脚手架,快去试试吧。

相关文章