Zenn
Open8

【Flutter】パッケージ化、そしてMelosについて

Flutter
heyhey1028heyhey1028

パッケージの種類

packageとpluginに分けられる

  • package: Dartのみで書かれたパッケージ。Flutter用に限らず様々な用途のモノが存在する。
  • plugin：Dart + iOS/AndroidのネイティブAPIにもアクセスするライブラリ。exampleプロジェクトを持ち、Flutterのwidgetを提供するパッケージもこちらに分類される。

パッケージの作り方

packageの作り方

  1. 下記コマンドで雛形を作成。templateオプションでpackageを指定
$ flutter create --template=package sample
  1. lib/sample.dartに共通化したいコードを記述していく。library句がpackageである印
lib/sample.dart
library sample;

/// A Calculator.
class Calculator {
  /// Returns [value] plus 1.
  int addOne(int value) => value + 1;
}

pluginの作り方

  1. 下記コマンドで雛形を作成。templateオプションでpluginを指定
$ flutter create --template=plugin sample

出力されたテンプレートが以下

sample
├── CHANGELOG.md
├── LICENSE
├── README.md
├── analysis_options.yaml
├── example
│   ├── README.md
│   ├── analysis_options.yaml
│   ├── lib
│   │   └── main.dart
│   ├── pubspec.lock
│   ├── pubspec.yaml
│   ├── sample_example.iml
│   └── test
│       └── widget_test.dart
├── lib
│   ├── sample.dart
│   ├── sample_method_channel.dart
│   └── sample_platform_interface.dart
├── pubspec.lock
├── pubspec.yaml
├── sample.iml
└── test
    ├── sample_method_channel_test.dart
    └── sample_test.dart
  • --platformsオプションに「android / ios / web / linux / macos」から追加したいplatformをドット区切りで指定する事でiOSディレクトリやAndroidディレクトリなども生成してくれる
  1. lib/sample.dartにパッケージを書く。
lib/sample.dart

import 'sample_platform_interface.dart';

class Sample {
  Future<String?> getPlatformVersion() {
    return SamplePlatform.instance.getPlatformVersion();
  }
}
  • パッケージに対しての直接的なテストが行えない為、example内でパッケージを利用したプロジェクトを作り、検証していく。example以下は通常のFlutterプロジェクトとなっている

パッケージのimport

ローカルの場合

同一レポジトリ内に作成されたパッケージがある場合、プロジェクト側pubspec.yamlで下記の通りimportする

test_project/pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  test_package:
    path: ../test_package

pub.dev公開済みの場合

  • 通常通り、test_project/pubspec.yamlに記述するだけ
heyhey1028heyhey1028

Melosとは

複数のプロジェクトやパッケージを１つのレポジトリで管理するモノレポを使う際に便利な機能を備えたCLIツール

Melosで出来る事

主なところで言うと下記

  • ローカルパッケージのリンクとインストール
  • 複数のパッケージで同時にコマンドを実行
  • CI/CD環境での自動化支援 (CI/CD環境でも実行可能)

導入手順

  1. melosのインストール
    自身のマシンに以下コマンドでmelosをインストール
dart pub global activate melos
  1. melos.yamlを作成
    レポジトリのルートにmelos.yamlを作成する
- packages/
  - a_package
    - lib/
      - src/
      - a_package.dart
    - pubspec.yaml
  - b_package
    - lib/
      - src/
      - b_package.dart
    - pubspec.yaml
  - c_app
    - lib
      - src/
      - main.dart
    - pubspec.yaml
- analysis_opsions.yaml
- .gitignore
- melos.yaml
  • .gitignoreやanalysis_options.yamlもルートに配置する
  • プロジェクト単位で.gitignore、analysis_options.yamlの設定が異なるのであれば、プロジェクト/パッケージ配下に配置する

  1. melos.yamlを定義する

  2. melosコマンドの実行

heyhey1028heyhey1028

melos.yamlを定義する

melos.yamlの基本構成

  • name(必須)
  • repository
  • packages(必須)
  • ignore
  • scripts
melos.yaml
# Reference: https://github.com/KosukeSaigusa/flutterfire-commons/blob/main/melos.yaml
name: test-project

repository: https://github.com/heyhey1028/test-project

packages:
  - samples/**
  - samples/**/example/**

scripts:
  clean:
    run: melos exec -- "flutter clean"

  pub:get:
    run: melos exec -- "flutter pub get"

  clean:pub:get:
    run: melos exec -- "flutter clean && flutter pub get"

  analyze: melos exec -- dart analyze .
heyhey1028heyhey1028

１つのscriptの中に複数の処理を実行したい時はどう書いたらええんやろか

heyhey1028heyhey1028

melos管理のmono repoでvscodeのlaunch.jsonを使う場合

手順

  1. .vscode/launch.jsonを定義 単純にpathで立ち上げたいプロジェクトのmain.dart`を指定する
.vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Run my sample" ,
        "program": "samples/my_sample/lib/main.dart",
        "request": "launch",
        "type": "dart",
        "args": ["-v","--debug"]
      }
    ]
  }
  1. .vscode/settings.jsonを定義
    上記の設定だけだとlaunch.jsonがネストしたプロジェクトまで到達する事が出来ないので、settings.jsonにdart.projectSearchDepthを設定する必要がある
.vscode/settings.json
{
    "dart.projectSearchDepth": 4,
    "dart.runPubGetOnPubspecChanges": "never",
}
  1. Debugウィンドウからコマンドを指定して実行

参考