提升開發效率的好物，Mason 讓你輕鬆撰寫自定義模板！

Mason and Brick by Dart

Mason 可以有效的幫我們提升開發效率，避免花不必要的時間在創建檔案或是無聊的代碼上，可以根據自己和公司的開發習慣去自定義模板和生成結果，很值得投資的一個工具。那就廢話不多說，馬上跟著我往下了解它吧！

• Mason 是樣板生成工具，使用 Brick 幫助我們省略樣板代碼，節省很多時間
• Brick 為積木模塊，包含已經準備好的檔案跟程式碼，我們只需要執行命令將它創建出來
• BrickHub 是一個雲端平台，就像 Github，在上面尋找其他開發者提供的 Brick 專案，將它們安裝和使用在自己的專案裡

BrickHub

文件：https://docs.brickhub.dev/

安裝 CLI

所有的操作都需要 mason 命令

dart pub global activate mason_cli

初始化 Mason

在專案裡載入 Mason 設定，包含 mason.yaml 和 mason-lock.json。是不是跟 pubspec.yaml 很像，它們紀錄了專案與 Brick 的設定，預設擁有 hello 積木，會生成一個 HELLO.md 檔案

mason init

執行/使用 Brick

跟安裝套件一樣，我們找到了這個積木，是因為它裡面生成的檔案跟程式碼我們需要，可以利用它節省時間。執行 make 來生成檔案

• -o → 指定檔案的生成目的地

1. 一般

mason make <brick-name>

// hello
mason make hello

2. 命令參數

如果已經知道 Brick 需要的參數，可以直接在命令上使用

mason make hello -name Yii

3. 載入配置檔案

如果 Brick 需要的餐數太多，或是不方便手動輸入的話，可以提前準備好相關的 json 配置檔案

{
  "name": "Yii"
}

mason make hello -c config.json

使用 Brick

1. 本地目錄

設置相對路徑即可

good:
 path: ./mason/good

2. Git

clean_architecture_feature_riverpod:
    git:
      url: https://github.com/chyiiiiiiiiiiii/clean_architecture_feature_riverpod

下載 Brick

下載目前 mason.yaml 裡設置的所有積木

mason get

創建 Brick

根據自己或是公司的專案以及平常的開發習慣製作 Brick，生成日常使用的那些無聊代碼，讓我們效率提高。使用 mason new 命令

• -o → 指定檔案的生成目的地
• --desc → 描述

創建積木後會有5個檔案

• __brick__ → 裡面的資料夾和檔案都是會生成出來的東西
• brick.yaml → 積木設定檔

撰寫生成內容 brick

• 使用 mustache 語法撰寫，負責處理模板代碼
• 注意：當有資料夾時裡面不能沒有檔案，否則生成時不會創建資料夾

mustache： https://mustache.github.io/

針對資料夾和檔案，最簡單的撰寫方式是 {{arg}}，而最好的是再指定命名類型，以下列出 Flutter 開發時最常用的幾種

• camelCase() → helloWorld
• pascalCase() → HelloWorld
• snakeCase() → hello_world

🥸 Brick Syntax | BrickHub Docs

針對頁面此範例自定義了元件內容，接著幫我生成對應代碼

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class {{feature_name.pascalCase()}}Page extends HookConsumerWidget {
  const {{feature_name.pascalCase()}}Page({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return const Placeholder();
  }
}

也可以根據條件、布林值決定是否要生成對應內容

{{#useGoogleFonts}}
google_fonts: latest
{{/useGoogleFonts}}

設定參數

基本的名稱、描述還有版本，建議給個完整且好閱讀的內容，之後也可以將自己的積木上傳到 BrickHub，貢獻社群，讓大家使用

最重要的是 vars 參數配置，這邊是生成資料夾和檔案時會用到的參數欄位，讓使用者可以輸入

• 第一層為名稱
• type → 型別，有字串、整數、布林值、陣列
• description → 參數描述
• default → 預設內容
• prompt → 輸入時的提醒文字

vars:
  feature_name:
    type: string
    description: Name of the folder, files.
    default: new_feature
    prompt: What is the name of feature?

發布 Brick

1. 登入 BrickHub

目前還在早期階段，所以需要向官方申請權限，只能用驗證過的 Email 去註冊會員。申請後大概要等 1 ~ 2 週

註冊完成後即可使用 CLI 登入

mason login

上傳 BrickHub

在 Brick 專案路徑裡執行命令

mason publish

成功後 Brick 就會在 BrickHub 上公開讓大家使用。也要提醒一下，請確保自己的東西沒有人上傳過，而且是正確的，因為發布後就無法下架了，可避免隨意上傳的問題

範例

本範例建立了一個 clean_architecture 搭配 Riverpod 使用的積木模板，將它取名為 good，在我每次寫要新增 feature 時都可以請它幫我生成相關檔案。可以看到寫完後會有紅色錯誤，這是正常的情況，因為有很多內容都是 mustache 寫法，Dart 讀不懂

結論

Mason 已經出來快一年了，由 Felix Angelov 開發，同樣是 bloc 作者，他對於 Flutter 的貢獻很多，讓人值得敬佩。每位開發者做出來的東西都是為了社群，也很建議有想幫助社群的朋友可以多看看開源專案，試著去幫忙盡一點心力，這也是我正在學習的部分。另外有發現特別、好用的 Brick 可以跟我說，或是有其他想法都很歡迎跟我討論！

• 學會運用 Flutter Widgetbook，該管好自己和公司的元件庫了！
• 剛進入 Flutter 嗎？適合初學者食用，GetX 是否適合你呢！
• 教你為 Riverpod 2.0 撰寫 Flutter 測試 part.1
• 教你為 Riverpod 2.0 撰寫 Flutter 測試 part.2
• 輕鬆了解 Isar NoSQL DB，用它來實作 Flutter 資料庫吧！
• Flutter 輕鬆實作 i18n，使用 easy_localization_generator 就對了
• Flutter CICD 使用 Gitlab Runner 和 App Center 實作 part.1
• Flutter CICD 使用 Gitlab Runner 和 App Center 實作 part.2
• 使用 CodeMagic 和 Firebase 實現 Flutter CICD
• 輕鬆完成Flutter開發環境，最新版！
• 實作Flutter多變有趣的滾動效果CustomScrollView！
• 如何在Flutter使用 Makefile 節省你的時間？
• Easily understand StatefulWidget LifeCycle of Flutter
• “freezed” makes model class strong and easily
• 提高Flutter性能的小技巧！(一)
• 提高Flutter性能的小技巧！(二)
• 提高Flutter性能的小技巧！(三)
• What are Async and Isolates in Flutter?
• LoadBalancer is optimization for Isolates in Flutter
• Riverpod 輕鬆學，原來這麼好用！
• Riverpod 輕鬆學(二)，一些進階用法！

About

• GitHub： chyiiiiiiiiiiii
• Instagram： flutterluvr.yii
• Linkedin： yiichenhi
• Youtube： Yii
• Youtube： 一起饅頭(美食頻道)
• Email： ab20803@gmail.com

Contribution

如果覺得文章不錯的話可以贊助，讓我有更多動力和熱情分享學習紀錄和生活！請我喝一杯咖啡吧～

https://www.buymeacoffee.com/yiichenhi

希望有幫助到你/妳，歡迎追蹤我，方便瀏覽最新的文章～