脚手架工具实际上就是node-cli应用, 创建脚手架工具实际上就是创建一个cli应用,

步骤

1.首先创建一个文件夹,通过npm init创建一个package.json文件
image.png

  1. 在package.json中指定一个bin字段做为入口文件

image.png

  1. 创建这个文件并在这个文件中开头写入#!/usr/bin/env node ,node cli入口文件必须要有这样的文件头,

如果是linux 或者 mac 还要修改此文件的权限为755,通过 chmod 755 cli.js进行修改。
image.png

  1. 通过yarn link 命令将此模块link到全局,然后执行命令(link时所在文件夹的名字)nodecli,查看 我们的打印结果:

image.png
到此说明我们的cli应用的基础就已经ok了

  1. 脚手架工作过程:1.通过命令交互询问用户问题,2.根据用户回答的结构生成文件

在node中使用inquirer模块 发起命令询问,首先安装 yarn add inquirer
image.png
执行 nodecli 可见打印出:
image.png

  1. 然后我们创建index.html,和style.css两个基础文件作为我们的测试文件

image.png
image.png
在then方法中根据用户回答的结果去生成文件,
image.png

  1. 新建一个目录,执行nodecli命令,根据提示输入项目名称,然后就会生成一个带有index.html和style.css文件的项目

image.png
完整的简简单单的node脚手架就完成拉,基本原理大概就是这样:

  1. #!/usr/bin/env node
  2. //node cli入口文件必须要有这样的文件头
  3. //如果是linux 或者 mac 还要修改此文件的权限为755
  4. //通过 chmod 755 cli.js进行修改
  5. console.log("i am working")
  6. //脚手架工作过程
  7. //1.通过命令交互询问用户问题
  8. //2.根据用户回答的结构生成文件
  9. //在node中使用inquirer模块 发起命令询问,首先安装 yarn add inquirer
  10. const inquirer = require('inquirer')
  11. const fs = require('fs')
  12. const path = require('path')
  13. const ejs = require('ejs')
  14. inquirer.prompt([//发起命令行的询问,数组中的每一个成员都是我们的一个询问
  15. {
  16. type: 'input',//s输入方式
  17. name: 'name',//返回值的键
  18. message: 'Project name??',//屏幕上给用户的提示
  19. name: 'name',
  20. name: 'name',
  21. }
  22. ]).then((message) => {
  23. //then里面接收到的用户的答案
  24. //console.log(message)
  25. //根据用户回答的结果去生成文件
  26. //首先把模板的目录和目标目录确定下来,
  27. //模板目录
  28. const tmpDir = path.join(__dirname, 'templates')
  29. //目标目录
  30. const destDir = process.cwd()
  31. //通过fs读取模块,将模板下的文件全部切换到目标目录
  32. fs.readdir(tmpDir, (err, files) => {
  33. if (err) throw err
  34. console.log(files)
  35. //通过模板引擎去渲染这个路径所对应的文件
  36. files.forEach(item => {
  37. //安装一个模板引擎 yarn add ejs
  38. //通过模板引擎渲染文件
  39. ejs.renderFile(path.join(tmpDir, item), message, (err, result) => {
  40. if (err) throw err
  41. //将结果写入目标文件
  42. fs.writeFileSync(path.join(destDir, item), result)
  43. })
  44. })
  45. })
  46. })