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

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

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

  1. #!/usr/bin/env node
  2. const fs = require('fs');
  3. const path = require('path');
  4. const inquirer = require('inquirer');
  5. const ejs = require('ejs');
  6. inquirer.prompt([
  7. {
  8. type: 'input',
  9. name: 'name',
  10. message: 'project name'
  11. }
  12. ]).then(answer => {
  13. // console.log(answer);
  14. const tmpDir = path.join(__dirname, 'templates'); // 模板路径
  15. const aimDir = process.cwd(); // 当前命令行的路径
  16. fs.readdir(tmpDir, (err, res) => {
  17. if (err) throw err;
  18. res.forEach(file => {
  19. ejs.renderFile(path.join(tmpDir, file), answer, (err, result) => {
  20. if (err) throw err;
  21. fs.writeFileSync(path.join(aimDir, file), result);
  22. })
  23. })
  24. })
  25. })
  1. 首先导入fs、path、ejs和inquirer。
  2. 接下来定义inquirer.prompt,这是一个用于命令行提示和获取命令行输入的方法。如果有多个输入或提示,可以用数组存储,每个数组里面的对象分别对应类型、变量名、提示信息。
  3. 当获取到输入后会有一个异步回调函数,获取到用户在命令行输入的信息。
  4. 接下来获取到模板路径和命令行路径。
  5. 接下来读取到模板的路径并且读取模板里面的文件,将模板中的文件使用ejs进行写入到用户的路径。

6. 执行命令

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

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

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

最后

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

相关文章