前端自動化工具plopjs

plop對於模板**的處理選擇了 handlebars 作為模板

通過自動化工具減少開發中重複**的書寫

新建一容器元件用於展示訊息列表，元件名為message

使用plop前

在專案的適當目錄下新建message/index.js檔案，message/index.less檔案。

在message/index.js檔案內寫出react元件的基礎**，並在message/index.less內書寫預設樣式

使用plop之後（需要提前進行相關的配置）

專案根目錄，終端執行plop，根據提示輸入元件名message

新增路由配置檔案（這步驟應該也可以由plop完成）

對比

注：plop.js的終端互動使用了inquirer.js，所以也可以使用inquirer的外掛程式對其功能進行擴充套件（比如選擇資料夾）

安裝npm包

npm i plop -g

npm i plop -d

在專案的根目錄建立配置檔案plopfile.js

module.exports = function (plop) ],

actions: [}.js',

templatefile: 'plop-templates/controller.hbs'

}]});

};建立 plop-templates/controller.hbs檔案。並寫一些內容。

在專案根目錄下，執行 plop，然後根據終端命令提示進行操作即可，最終會發現自動生成了 src/}.js 檔案，檔案的內容就是模板的內容。

配置檔案是支援ts的，具體的使用方法請參考官網

此函式接受兩個引數，第乙個引數是設定的generator的名字，第二個config物件需要包括提示和操作（description是可選的）。prompts陣列被傳遞給inquirer。actions陣列是要執行的操作的列表。

典型的配置如下：

module.exports = function (plop) } 取到這裡輸入的值，在模板內也可以通過}取到這個值

message: '請輸入函式元件的名字（必填）', // 會顯示在控制台

validate(val) ,

default: "default", // 預設值

}],actions:[}/index.js 檔案內容為templatefile指定的內容

type: 'add',

path: 'src/components/}/index.js',

templatefile: 'plop-templates/functioncomponentwithlesspage.hbs',

// 如果模板檔案內容少，可以直接使用template指定

// template:""

// 在將檔案輸出到硬碟前會呼叫transform函式

// transform:()=>""

// 當執行這個actions，data會合併到prompt answers。

// data:{}

//...其他不常用引數請檢視文件

}，,],}};

prompts

prompts陣列會直接傳遞給inquirer，所以更多配置請參考

actions

如果actions需要根據prompts的answer來決定，那麼可以使用動態actions，示例如下。

module.exports = function (plop) ],

actions(data)

return ;

},});

};用於使用inquirer外掛程式來擴充套件prompts

// 為 prompt 增加目錄選擇功能
const promptdirectory = require('inquirer-directory');
module.exports = function (plop) ]
});};

在plopfile中新增自定義的actiontype（類似於add，addmany）

module.exports = function (plop) );
// or do async things inside of an action
plop.setactiontype('dotheasyncthing', function (answers, config, plop) else 
});});
// use the custom action
plop.setgenerator('test', , ]
});};

module.exports = function (plop) );
// or in es6/es2015
plop.sethelper('uppercase', (txt) => txt.touppercase());
};

module.exports = function (plop) }
};

loads generators, helpers and/or partials from another plopfile or npm module

通過內建的action和自己擴充套件的action，加上前端的一切周邊工具，比如nodejs、babel，基本可以使得plop可以實現任何的功能，不過具體是先到什麼程度，怎樣去用還需要根據具體的專案去權衡。

如果將tob的前端專案的業務邏輯抽離出**模板，那麼我想應該是可以實現如下功能的。

比如：從乙個**頁的模板自動生成乙個純展示的表單頁。我們只需要配置好介面和需要展示的內容，比如頁面的邏輯**，ajax請求有關**的自動生成，路由配置檔案的自動修改等？之後在針對於**做修改，即可實現需求

我們需要建立乙個表單頁，是否可以直接通過命令列指定下，與表單相關的介面，然後就將表單有關的**自動生成出來，之後再在模板**上做修改以實現具體的需求

這樣可以將更多的工作去交給自動化去處理。大量提公升開發效率。不過，事情沒有面面俱到的，可能做之前還要結合實際的場景來決定適用到什麼程度。

比如：專案的功能模組的相似程度，比如tob的業務往往更容易抽象出模板，且模板也更加通用。

對於原有專案的**侵入性，因為如果涉及到修改現有檔案，可能需要對現有檔案做標記，比如在js中新增特殊的注釋。

專案處於的階段，比如是高速迭代，還是維護。在實際的開發中是否會有大量的類似**對我們的開發工作造成困擾。

業務邏輯是否複雜多變。

對於這個工具，我感覺做一些類似於頁面的**模板生成還是挺好的，尤其時對於大多數tob專案來說，每個頁面的邏輯其實差距不大，主要也就是列表、表單、**、之類的東西。通過命令列互動來代替之前的複製、貼上、手動修改，我想還是會提高一定的效率的。

前端自動化工具plopjs

前端自動化工具 gulp

關於自動化工具

DevOps 自動化工具

前端自動化工具plopjs

前端自動化工具 gulp

關於自動化工具

DevOps 自動化工具

相關推薦