Plop工具和脚手架工作原理

Plop 创建文件工具

plop 是用于在项目中创建特定类型文件的工具。

如果有开发小程序经历的朋友，应该记得在微信小程序的 app.json 里的pages中添加了新了页面路径之后，小程序开发工具就会立刻在pages目录中，自动帮我们创建出一个新的页面目录并创建好它其中的page.wxml、page.js、page.wxss、page.json四个文件。

而使用Plop就可以让我们的项目中也能够达到这样类似的功能。

使用方法

plop的使用非常的简单

1. 在项目中安装 plop 模块 yarn add plop
2. 在项目根目录下创建一个 plopfile.js 文件
3. 在plopfile.js 中定义生成文件的任务

	module.exports = plop => {
	// 设置生成规则
	// 参数1自定义 是cli的执行命令 比如 component 执行 plop component 
	  plop.setGenerator('component', {
	    description: 'create a component',
	    // 命令行提示
	    prompts: [
	      {
	        type: 'input', // 用户行为
	        name: 'name', // 输入的变量
	        message: 'component name', // 提示内容
	        default: 'MyComponent' // 默认值
	      }
	    ],
	    // actions中定义了用户在命令行输入完毕之后，要执行的行为
	  	// 一个行为就是一个数组成员，如果要添加多个文件就在actions中扩展
	    actions: [
	      {
	        type: 'add', // 代表添加文件
	        path: 'src/components/{{name}}/{{name}}.js',
	        templateFile: 'plop-templates/component.hbs' 
	      }
	    ]
	  })
	}

4. 准备特定类型的文件模板
5. 通过命令行运行cli指令 plop component

脚手架工作原理

利用node实现脚手架工作原理还是比较简单的。

脚手架的工作过程：

• 通过命令行交互询问用户问题
• 根据用户回答的结果生成文件

可以通过一个简单的demo来做简易的脚手架工具

1. 创建项目文件，初始化package.json
2. 在根目录创建一个cli.js 文件
3. 在package.json文件中 添加 "bin":"cli.js"
4. 在 cli.js 的文件顶部添加 #!/usr/bin/env node
   • Node CLI 应用入口文件必须要有这样的文件头
   • 如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755
   • 具体就是通过 chmod 755 cli.js 实现修改
5. 安装用户与命令行交互的工具模块 yarn add inquirer 并导入
6. 调用 inquirer 的prompt方法 传入信息数组 也就是要给用户交互的信息
7. prompt方法返回值是一个promise对象 在then中完成后续文件读写

	#!/usr/bin/env node
	
	// Node CLI 应用入口文件必须要有这样的文件头
	// 如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755
	// 具体就是通过 chmod 755 cli.js 实现修改
	
	// 脚手架的工作过程：
	// 1. 通过命令行交互询问用户问题
	// 2. 根据用户回答的结果生成文件
	
	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(anwsers => {
	  // console.log(anwsers)
	  // 根据用户回答的结果生成文件
	
	  // 模板目录
	  const tmplDir = path.join(__dirname, 'templates')
	  // 目标目录
	  const destDir = process.cwd()
	
	  // 将模板下的文件全部转换到目标目录
	  fs.readdir(tmplDir, (err, files) => {
	    if (err) throw err
	    files.forEach(file => {
	      // 通过模板引擎渲染文件
	      ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => {
	        if (err) throw err
	
	        // 将结果写入目标文件路径
	        fs.writeFileSync(path.join(destDir, file), result)
	      })
	    })
	  })
	})