前端自動化構建工具--Plop

前端自動化構建工具 ---- Plop

前言：週末在家學習了一些前端自動化構建工具，Generator、Plop、Grunt、Gulp，我還以爲目前用不到這些工具，沒想到週一一上班看到這周任務是要開發N個新模塊，我就感覺我該求助於某個自動化工具了😂😂

我要開發的每個模塊的結構骨架都非常相似，就可以使用Plop來實現自動化了，Plop旨在根據模板文件自動化創建組件，而不是一個完整的大型應用，這是非常符合我的預期的😄😄😄，接下來我就來介紹一下Plop如果幫助我們在開發過程中提高工作效率。

一、安裝plop

在項目的根目錄下面使用yarn命令安裝plop：yarn add plop

可以在Plop代碼倉庫看到Plop源代碼以及詳細說明文檔：https://github.com/plopjs/plop

二、編寫plop的入口文件：plopfile.js

在項目根目錄下創建一個文件:plopfile.js。在後面的命令行交互中，我們可以通過prompts獲取用戶輸入的一些信息，如下面的name變量就會由用戶輸入獲得，默認值是MyComponent。我們在指定模板文件生成新文件的時候，可以通過花括號形式的插值表達式傳入用戶輸入的值，如{{name}}.js,那生成的文件名就是用戶輸入的字符串名字。

plopfile.js：

// Plop 入口文件，需要導入一個函數
// 此函數接受一個plop對象，用戶創建生成器任務

module.exports = plop => {
  plop.setGenerator('component', { // component 就是接下來的yarn plop命令後面帶來指令名稱
    description: 'create a component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'component name',
        default: 'MyComponent'
      }
    ],
    actions: [
      {
        type: 'add', // 代表添加文件
        path: 'src/components/{{name}}/{{name}}.js', // 要生成的文件路徑
        templateFile: 'plop-templates/component.hbs' // 文件模板
      },
      {
        type: 'add', // 代表添加文件
        path: 'src/components/{{name}}/{{name}}.css',
        templateFile: 'plop-templates/component.css.hbs'
      },
    ]
  })
}

三、創建模板文件

在項目根目錄下創建一個文件夾plop-templates放模板文件，然後創建兩個文件，模板中的需要替換的變量用雙層花括號的插值表達式傳入，如下面的{{name}},其中name來自於命令交互模式用戶輸入的值。

• plop-templates/component.css.hbs

  import React from 'react';
  import ReactDOM from 'react-dom';
  import CoursePackage from './{{name}}';
  
  it('renders without crashing', () => {
    const div = documents.createElement('div');
    ReactDOM.render(<{{name}}/>, div);
    ReactDOM.unmountComponentAtNode(div)
  })
  

• plop-templates/component.hbs

  import React from 'react';
  
  export default () => (
    <div className="{{name}}">
      <h1>{{name}} Component</h1>
    </div>
  )
  

可能有的同學會有疑問爲什麼模板文件的擴展名是hbs，是因爲plop的模板文件中的插值語法採用的是handlebars語法，所以爲了vscode解析語法高亮，所以擴展名最好用hbs，但如果用別的擴展名也沒有問題，是沒有影響的。

四、執行plop命令進行自動化任務

執行自動化命令：yarn plop component
命令行會等待你輸入一個component name，我輸入了一個Body

按下回車，此時就會生成對應的文件了:

其中所有的{{name}}都被替換成了我輸入的Body

此時就大功告成了

五、今日戰績（值得紀念）

1. 我的plopfile.js文件

// Plop 入口文件，需要導入一個函數
// 此函數接受一個plop對象，用戶創建生成器任務

module.exports = plop => {

  plop.setGenerator('component', {
    description: 'create a component',
    prompts: [
      {
        type: 'input',
        name: 'moduleName',
        message: 'module name',
        default: 'BusinessSkills'
      },
      {
        type: 'input',
        name: 'menuName',
        message: 'menu name',
        default: 'CoursewareLibrary'
      },
      {
        type: 'input',
        name: 'componentName',
        message: 'component name',
        default: 'componentName'
      },
    ],
    actions: [
      {
        type: 'add',
        path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/index.jsx',
        templateFile: 'plop-templates/Component/index.jsx'
      },
      {
        type: 'add',
        path: 'public/testdata/{{componentName}}.json',
        templateFile: 'plop-templates/component.json'
      },
      {
        type: 'add',
        path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/locales/zh-CN.js',
        templateFile: 'plop-templates/Component/locales/zh-CN.js'
      },
      {
        type: 'add',
        path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/components/PopWindow/index.jsx',
        templateFile: 'plop-templates/Component/components/PopWindow/index.jsx'
      },
      {
        type: 'add',
        path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/components/PopWindow/Detail.jsx',
        templateFile: 'plop-templates/Component/components/PopWindow/Detail.jsx'
      },
      {
        type: 'add',
        path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/components/PopWindow/model.js',
        templateFile: 'plop-templates/Component/components/PopWindow/model.js'
      },
      {
        type: 'add',
        path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/components/PopWindow/services.js',
        templateFile: 'plop-templates/Component/components/PopWindow/services.js'
      },
      {
        type: 'add',
        path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/components/{{componentName}}Grid/index.jsx',
        templateFile: 'plop-templates/Component/components/componentNameGrid/index.jsx'
      },
      {
        type: 'add',
        path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/components/{{componentName}}Grid/model.js',
        templateFile: 'plop-templates/Component/components/componentNameGrid/model.js'
      },
      {
        type: 'add',
        path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/components/{{componentName}}Grid/services.js',
        templateFile: 'plop-templates/Component/components/componentNameGrid/services.js'
      },
    ]
  })
}

2. 模板文件

此處有坑！！！就是我的模板文件要生成jsx文件，所以裏面有{{}}的jsx語法，而這個是不能讓plop解析的，也就是說模板文件中的有些{{}}要原樣輸出，這裏我花了好長時間查資料都差不到怎麼解決😭😭😭，最終是去handlebars的網站上查的語法才查到了解決方法，就是在花括號前面加一個反斜槓進行轉義，使{{}}原樣輸出，如上圖中的箭頭指向的地方，寫成\{{ }}就行了。
handlebars的語法地址：https://handlebarsjs.com/guide/expressions.html#escaping-handlebars-expressions

3. 執行plop命令自動化生成組件

yarn plop component

大功告成✌️✌️✌️ 第一次在實際開發過程中使用這種前端自動化構建工具，體驗了一番新的開發方式，效率也大大提高了，開森😆😆😆