了解 -- Plop · 前端工程化學習筆記

>[success] # Plop [Plop 推薦文章，更多使用細節讀這個文章](https://www.yuque.com/kongdepeng/rgpm60/pt15oa) ~~~ 1.官網對'Plop'的介紹：把Plop稱為'micro-generator framework'。現在，我稱其為'小工具'，因為它為您提供了一種以一致的方式生成代碼或任何其他類型的純文本文件的簡單方法。 2.在開發中經常需要創建相同類型的文件，整個過程非常繁瑣，而且很難統一項目中基礎的代碼。 'Plop'是一款主要去為了創建項目中特定類型文件的小工具，有點類似 Yeoman 中的 Sub Generator，不過它不會獨立去使用，一般我們會把 Plop 集成到項目當中用來去自動化的創建同類型的項目文件 3.簡單的說和之前的'Yeoman'相比'Yeoman'通過'yo' 來提供的'generator' 但是'Yeoman'這種創建的是整個項目目錄結構和文件配置一類，即使也可使用'Yeoman 中的 Sub Generator'來創建小型項目結構目錄和配置文件，是需要獨立去使用的，' Plop 集成到項目'跟項目針對性的擴展使用的 ~~~ >[danger] ##### 舉個實際開發的例子 ~~~ 1.在多頁面開發的情況下，經常我們需要創建如下的工程目錄,站在代碼的角度來說，我們可以提供一個方法用戶輸入指令決定文件名稱，我們根據這個名稱來生成'css,js,html'文件，甚至文件內項目通用部分內容和'js','css' 引入，這種工作已經是在項目開發階段在做了'Yeoman'雖然也可以實現，但是導致說可能這類的工作只會使用到'Yeoman '極少部分的api，此時就是'Plop'工具使用 ├───index │ ├─── index.css │ ├─── index.html │ └───index.js ├───home │ ├─── home.css │ ├─── home.html │ └─── home.js ~~~ >[info] ## 使用Plop ~~~ 1.關于安裝，'Plop' 是針對項目開發階段使用，一般是安裝在開發依賴包，當然也可安裝在全局隨時使用 npm install --save-dev plop -- 安裝項目到開發依賴 npm install -g plop -- 安裝項目到全局依賴 2.因為plop 集成的是Handlebars 因此要遵循Handlebars模板定義規則 ~~~ >[danger] ##### 使用 ~~~ 1.在項目的根目錄下創建一個plopfile.js ~~~ * plopfile.js ~~~ // Plop 入口文件，需要導出一個函數 // 此函數接收一個 plop 對象，用于創建生成器任務 // plop 是一個node 工具因此這里使用node 的導出方式 module.exports = plop => { // plop 和yeoman 一樣也提供了自己一些api接口 // 第一個參數是'Generator'名字后期就是告訴plop執行對應命令的名稱 // 第二個config對象需要包括提示和操作，其中actions 對應執行命令動作 plop.setGenerator('my-first', { description: '使用polp創建的第一個腳手架工具指令', prompts: [{ type: 'input', name: 'name', message: '創建文件的名字', default: 'index' }], actions: [{ type: 'add', // 代表添加文件可以配置其他動作指令Add，AddMany，Modify，Append path: 'src/components/{{name}}/{{name}}.html', // 生成文件在項目位置 templateFile: 'plop-templates/index.hbs' // 因為plop 集成的是Handlebars 因此要遵循Handlebars模板定義規則 }, { type: 'add', // 代表添加文件 path: 'src/components/{{name}}/{{name}}.css', templateFile: 'plop-templates/index.css.hbs' }, ] }) // 創建更多的指令 plop.setGenerator('my-second', { description: '使用polp創建的第二個腳手架工具指令', prompts: [{ type: 'input', name: 'name', message: '創建文件的名字', default: 'index' }], actions: [{ type: 'add', // 代表添加文件 path: 'src/components/{{name}}/{{name}}.html', // 生成文件在項目位置 templateFile: 'plop-templates/index.hbs' // 因為plop 集成的是 }, { type: 'add', // 代表添加文件 path: 'src/components/{{name}}/{{name}}.css', templateFile: 'plop-templates/index.css.hbs' }, ] }) } ~~~ * plop-templates 文件下創建的模板 ~~~ // index.hbs <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="./{{name}}.css"> </head> <body> <p>{{name}}</p> </body> </html> ~~~ >[danger] ##### 使用 ~~~ npm plop <name> ,例如上面的案例我想使用的時候輸入'npm plop my-first',也可以將指令配置在pack.json中 ~~~