Flutter 如何建立併發布 Plugin (VS Code + GitHub 釋出)

 
 
 
相信採用 Android Studio 的直接建立 Flutter Plugin 都是由 IDE 直接輔助建立好全部的流程，連 Example 的 run 動作都已經幫助配置好了。但本文是採用 VS Code 進行專案配置並執行，整個流程先從命令列開始建立，一步步的進行。

 
 
 
用過 VS Code 的同學發現她的介面非常簡潔，程式碼函式提示、搜尋功能、除錯執行快速直接。因我是老 iOS 開發從業8年有餘，使用 xcode 的人都會對在 Android Studio 編輯器中那大量無用的按鈕而望而生畏，其 Android Studio 的資源浪費、卡頓性讓我無法接受。反觀 VSCode，其雖不是 google 的親兒子，有些“柺棍”還是需要用一用的。所以才有了這篇釋出 Plugin 的分享。

 
 
 
我在開發《九排》的演藝界專業產品，作為一個全新起步的手機客戶端產品，需要從一個能夠看得足夠長遠的開發套件環境對其進行支援，從2018年看到 Flutter 的正式版釋出，到2019年對整套 Widget 體系和 Dart 語言環境的深入瞭解和反覆的開發測試、效能測試，我認為 Flutter 對公司產品的將來有著良性推動和發展潛力。

 
 
 
本文的以建立《九排》App 腳手架開發工具包 為範例講解，腳手架開發工具包在下方：

 
 
 
 
github.com/maxcong/jpk…

 
 
 
Dart語言下包含有兩種Package形態：

 
 
 
第一種是 Dart Package，她是一種沒有 Android \ iOS 執行環境的純 Dart 語言包

 
 
 
第二種是 Flutter Plugin，她則是可以執行在 Android \ iOS 的 example 測試專案下外掛工程

 
 
 
命令列建立 Flutter Plugin 需要開啟控制檯，進入到具體希望建立包的目錄輸入以下命令：

flutter create --org com.example --template=plugin plugin_name複製程式碼

 
 
 
其中 –org 指定的是你需要執行 example 的包識別符號，此主要執行在 Andoird 和 iOS 中，而 iOS 中代表 bundle id 所指向的證書域。

 
 
 
後面的 –template=plugin 則是指定建立一個 Flutter plugin

 
 
 
建立好後，可以用 VS Code 開啟 Plugin 目錄，此時你會發現沒有 Android Studio 的輔助，我們很難去執行 Plugin 檔案。這種情況下，就要對整個專案工程目錄有一個直觀的理解：

• lib/plugin_name.dart
• 外掛主入口
• android/
• 用於在 Android 中實現的外掛包API
• ios/
• 用於在 iOS 中實現的外掛包API
• example/
• 一個依賴改外掛的 Flutter 可執行程式，主要是除錯開發時使用，我們主要用它

 
 
 
首先用 VS Code 開啟 Plugin 專案工程目錄後，IDE 會自動的在根目錄建立一個隱藏目錄：.vscode/ ，這個目錄下隱藏著一個 launch.json 檔案，我們主要來修改它。

 
 
 
開啟 launch.json 檔案可以看到自動建立的執行指令碼：

{ 
     "version": "0.2.0",      "configurations": [            { 
                 "name": "Flutter"                  "request": "launch",                  "type": "dart"            
  }      ]
  }複製程式碼

 
 
 
顯然這套執行指令碼不足以執行工程檔案，我們需要配置一下，而配置的主要目標是要執行 example/lib/main.dart 入口檔案。

修改 launch.json 進行配置：

{ 
     "version": "0.2.0",      "configurations": [            { 
                 "name": "Run Plugin",                  "program": "example/lib/main.dart", // 修改此處                  "request": "launch",                  "type": "dart"            
  }      ]
  }複製程式碼

 
 
 
這樣配置完畢，就可以讓 VS Code 具備執行能力，我們可以對外掛進行開發了。

 
 
 
正常的開發模式和普通的App的開發是完全一樣的，下一步就輪到釋出 Plugin 了。這裡由於 Plugin 的測試時間不希望釋出到 pub 平臺。那我們有的可選分支 釋出到 GitHub 上來除錯。然後才是釋出到 pub 平臺。

 
 
 
通過執行以下命令，可以在命令列中對此包進行正確性驗證：

flutter packages pub publish --dry-run複製程式碼

 
 
 
我們可以正常的上傳自己開發 Plugin 到自己的 GitHub 專案裡，並在本地 Push 最新的程式碼。但如果想要引用，需要在自己的 App 開發專案中修改 pubspec.yaml 檔案，以讓 packages 管理知道如何安裝。修改如下：

dependencies:    jpkit:        git:             url: https://github.com/maxcong/jpkit.git複製程式碼

 
 
 
packages 管理對 pubspec.yaml 檔案的縮排有嚴格要求。上面的程式碼配置告訴讓 packages 管理指導 jpkit: 是從 git: 中獲取，指向了 url:

注意：此處有如果頻繁更新 GitHub 提交時，可能有更新不下來的快取問題，我是通過等待一小會再次執行 flutter package get 得到最新結果。

 
 
 
如果你認為自己開發的 Plugin 的版本處於可釋出階段，那麼可以釋出她到 pub.dartlang.org/ 平臺

flutter packages pub publish複製程式碼

OK，至此已經將 Plugin 釋出到外網了，剩下的就是不停完善這個元件，以更好的融入到自己的產品工程檔案當中，祝你好運。