簡(jiǎn)介

plop可以通過命令行去生成、處理文件模板代碼等，從而簡(jiǎn)化項(xiàng)目中的手動(dòng)操作

使用

• 安裝plop模塊yarn add plop --dev

• 新建plopfile.js文件，plopfile工作入口文件

• 定義plopfile.js腳手架任務(wù)

  // 接收plop對(duì)象，用于創(chuàng)建生成器任務(wù)
  module.exports = (plop) => {
    // 可以對(duì)傳入?yún)?shù)進(jìn)行處理 用法{{ upperCase name }}
    plop.setHelper('upperCase', (txt) => {
      return txt.charAt(0).toUpperCase() + txt.substr(1)
    })
    // param 生成器名稱 生成器配置選項(xiàng)
    plop.setGenerator('component', {
      description: '創(chuàng)建新路由',
      prompts: [
        {
          type: 'input',
          name: 'name',
          message: '組件名',
          default: 'MyComponent',
        },
        // 選擇器
        {
          type: 'list',
          name: 'module',
          message: '選擇創(chuàng)建文件到下面哪個(gè)文件夾',
          choices: ['cmdb', 'monitor', 'resource', 'support', 'system'],
        },
      ],
      actions: [
        {
          type: 'add', // 代表添加全新文件
          path: `src/views/{{module}}/{{name}}/{{upperCase name}}.vue`,
          templateFile: 'plop-templates/component.vue.hbs',
        },
        {
          type: 'add', // 代表添加全新文件
          path: 'src/views/{{module}}/{{name}}/index.js',
          templateFile: 'plop-templates/component.hbs',
        },
        // 修改使用modify
        // pattern正則表達(dá)式 用它來匹配目標(biāo)文件追加的位置
        // template后面需添加$1，$1是pattern正則括號(hào)內(nèi)匹配到的字符串，當(dāng)發(fā)生替換時(shí)，占位符會(huì)連同模板文本一起替換掉目標(biāo)文件中的占位符，所以這個(gè)占位符會(huì)一直存在于目標(biāo)文件中，方便后續(xù)的追加
        {
          type: 'modify',
          path: 'src/utils/routerUtil.js',
          pattern: /(\/\/ ...more 此行不要?jiǎng)h除 plop創(chuàng)建模板要使用)/gi,
          template: "{{name}}: () => import('@views/{{module}}/{{name}}'),\r\n  $1",
        },
      ],
    })
  }
  
  

• 添加plop-templates文件夾，用于存放模板文件，模板文件需要使用hbs

  <template>
    <div></div>
  </template>
  
  <script>
    export default {
      name: '{{ upperCase name }}'
    }
  
  </script>
  <style>
  </style>
  

image-20210118200103371.png

• 使用yarn plop component（對(duì)應(yīng)生成器的名字）運(yùn)行腳手架任務(wù)，生成特定文件

• 最后添加到Npm Scripts中，方便使用

腳手架工作原理

1. yarn init --yes初始化項(xiàng)目

2. 在package.json中添加bin字段，指定cli應(yīng)用入口文件

3. 創(chuàng)建cli.js，添加頭`#!/usr/bin/env node`

4. 使用yarn link將當(dāng)前模塊link到全局，供其他使用

5. 創(chuàng)建templates模板目錄，引入模板文件

6. 使用inquirer模塊生成命令行交互詢問，yarn add inquirer

7. 獲取用戶回答，將模板文件復(fù)制到目標(biāo)文件，生成項(xiàng)目目錄

   #!/usr/bin/env node
   
   // Node Cli應(yīng)用入口文件必須要有這個(gè)文件頭
   
   // 腳手架工作流程
   // 1.通過命令行交互詢問用戶問題
   // 2.根據(jù)用戶回答的結(jié)果生成文件
   
   const inquirer = require('inquirer')
   const fs = require('fs')
   const path = require('path')
   const ejs = require('ejs')
   
   inquirer
     .prompt([
       {
         type: 'input',
         name: 'name',
         message: 'Project name',
       },
     ])
     .then((answer) => {
       // 根據(jù)用戶回答結(jié)果生成文件
   
       // 模板目錄
       const tempDir = path.join(__dirname, 'templates')
       // 目標(biāo)目錄
       const destDir = process.cwd()
   
       // 模板文件轉(zhuǎn)換到目標(biāo)文件
       fs.readdir(tempDir, (err, files) => {
         if (err) throw err
         // 此時(shí)獲取的文件是相當(dāng)于templates下的相對(duì)路徑
         files.forEach((file) => {
           // 通過模板引擎渲染相對(duì)路徑所對(duì)應(yīng)的文件
           ejs.renderFile(path.join(tempDir, file), answer, (err, result) => {
             if (err) throw err
             // 將結(jié)構(gòu)寫入目標(biāo)文件
             fs.writeFileSync(path.join(destDir, file), result)
           })
         })
       })
     })