Plop —— 小而美的腳手架工具 目錄

目錄

• Plop介紹
• Plop的具體使用
  • 具體步驟
• 總結

Plop介紹

主要用於創建項目中特定文件類型的小工具，類似於Yeoman中的sub generator，一般不會獨立使用。一般會把Plop集成到項目中，用來自動化的創建同類型的項目文件。

• plop-npm
• plop-github

Plop的具體使用

具體步驟

1. 新建目錄，初始化npm init -y，安裝Plop

npm install -g plop

2. 在目錄下創建plop-templates文件夾，裏面創建三個模板文件

• component.css.hbs

.{{name}} {
  
}

• component.hbs

import React from 'react';

export default () => (
  <div className="{{ name }}">
    <h1>{{name}} Component</h1>
  </div>
)

• component.test.hbs

import React from 'react';
import ReactDOM from 'react-dom';
import {{name}} from './{{name}}';

it('renders widthout crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<{{name}} />, div);
  ReactDOM.unmountComponentAtNode(div);
});

3. 在根目錄下創建一個plopfile.js的文件，這個文件是Plop的入口文件，需要導出一個函數，這個函數接收一個plop對象，用於創建生成器任務。

• plop.setGenerator：設置一個生成器，第一個參數是項目名稱，第二個函數是對象，對應設置選項
• 配置項內容：
  • description：描述
  • prompts：值是數組，命令行交互問題，一個問題對應一個對象
  • actions：值是數組，完成命令行交互過後完成的一些動作，一個對象一個動作

module.exports = plop => {
  // 設置一個生成器，第一個參數是項目名稱，第二個函數是對象，對應設置選項
  plop.setGenerator('compontent', {
    // 描述
    description: 'create a component',
    // 命令行交互問題
    prompts: [
        // 一個問題對應一個對象，配置參考自定義Generator
      {
        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'
      },
      {
        type: 'add',
        path: 'src/components/{{name}}/{{name}}.test.js',
        templateFile: 'plop-templates/component.test.hbs'
      }
    ]
  })
}

4. 在package.json中添加

  "scripts": {
    "plop": "plop"
  }

5. 運行

npm run plop
# 輸入模塊名稱
? component name Header
#√  ++ \src\components\Header\Header.js
#√  ++ \src\components\Header\Header.css
#√  ++ \src\components\Header\Header.test.js

此時在根目錄的src\components下面，有了三個文件

• Header.js

import React from 'react';

export default () => (
  <div className="Header">
    <h1>Header Component</h1>
  </div>
)

• Header.css

.Header {
  
}

• Header.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './Header';

it('renders widthout crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Header />, div);
  ReactDOM.unmountComponentAtNode(div);
});

這樣，就可以根據模板一鍵生成一個組件目錄。

總結

1. 將plop模塊作爲項目開發依賴安裝
2. 編寫用於生成特定類型文件的模板
3. 在項目根目錄下創建一個plopfile.js文件
4. 在plopfile.js文件中定義腳手架任務
5. 通過Plop提供的CLI運行腳手架任務