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

Yii Chen

10 min readMar 9, 2023

--

Mason and Brick by Dart

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

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

文件：

安裝 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: http://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：

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

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

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

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 可以跟我說，或是有其他想法都很歡迎跟我討論！

About

GitHub：
Instagram：
Linkedin：
Youtube：
Youtube： (美食頻道)
Email： [email protected]

Contribution

如果覺得文章不錯的話可以贊助，讓我有更多動力和熱情分享學習紀錄和生活!

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

Flutter Formosa