如何打造自動化前端項目CLI 工具

前言

在開發過程當中，尤爲是新開項目的時候，每每須要從新進行各類配置、甚至複製以往的代碼，爲了解決這種場景，就有了 CLI，想必你們平時都常常使用，好比 Vue 的vue-cli，React 的 create-react-app，這類工具存在的主要目的是：釋放雙手、加快項目開發進度。

個人場景

本文就將介紹我如何根據咱們團隊內部的繁瑣場景編寫 CLI，從而加快項目開發速度。

開發項目中最多見的非後臺管理系統莫屬了，若是你仔細觀察，就會發現大多數的後臺管理大同小異。

就咱們團隊內部的後臺管理系統而言，每次新開項目時，咱們都須要進行如下操做：

• 搭建項目：拷貝以前的項目來改，或者從新建立一個項目，再根據需求拷貝文件
• 新增頁面的時候，須要建立不少文件（視圖、路由、Vuex）

而每一個頁面其實也是大同小異：

• 數據表格（搜索、分頁、其餘操做等）
• 表單

實現思路

基於以上場景，我想到的解決方法就是編寫一個 CLI 工具，能夠一行命令實現如下功能：

• 初始化項目
• 增刪頁面

只有 CLI 天然是不夠的，還要搭配項目模板（template）使用。

但要注意腳手架工具要與項目模板解耦，下面細講。

項目模板

建立一個 GitHub 組織存放項目模板，一個模板應該包含如下：

1. meta.json

   根據項目自定義一些問題，好比：

   • 項目名稱
   • 項目描述

2. template 文件夾

   存放項目模板，初始化時根據用戶回答的問題，生成項目。

3. generator 文件夾

   執行 CLI 命令時，由 CLI 調用，主要用來自定義一些問題、模板文件信息等。

CLI

主要命令：

1. init：

   初始化項目，這時候會查詢項目模板列表，而後根據用戶所選的模板進行初始化（把項目模板下載到本地），而且生成一個template.json記錄當前項目模板的名字，供後續使用

2. add、delete：

   此命令需在生成後的項目中使用，會根據template.json中的模板信息找到對應的 generator 目錄下的方法，執行對應的方法。

寫在最後

每一個團隊面臨的場景不同，若是你也想編寫一個本身的 CLI 工具，但願本文能給你提供一些思路。

若是有興趣能夠參考一下個人 CLI 實現：fa-cli，項目模板：fa-web-template

感謝觀看。