Help us understand the problem. What is going on with this article?

Dart の BuildRunner を使ってみよう その1

More than 1 year has passed since last update.

何回かに分けて、 Dart の BuildRunner を、見ていきます。

BuidRunnerを使う事によって、ビルド時にアレコレ操作できるようになります。

例えば、Vue.dartなどの、アノテーションを利用した言語の拡張
https://github.com/kirbyfan64/vuedart

@VueComponent(template: '<p>{{uppercaseName}}</p>')
class ShowName extends VueComponentBase {
  ShowName(context): super(context);

  @prop
  String name;

  @computed
  String get uppercaseName => name.toUpperCase();
}

例えば、sass_builder のように、 scss から css を生成したり
https://github.com/dart-league/sass_builder.git

そう行った事ができるようになります。

はじめに

Dart Advent 2018 の 1日目の記事です。

1日目ということで、 最初に実行するのは、Dart関連のコマンドはビルドかなと
思い、「Dartのビルドシステム について解説」をする事にしました。

まぁ、 よーく考えたら、pub コマンドだったかな..
とも、思いましたが

解説する事

build_runner について解説します。
https://github.com/dart-lang/build

しかし、 annotation など、少し複雑な事をしようとすると、
build package だけを理解しても難しいです。

package:analyzer
package:source_span
package:source_maps

といった、ものの理解も必要です。

これらについて解説していきます。

1回目 は、 package:build の使い方

https://github.com/dart-lang/build

1回目では、 build runner 向けのコードを書いて、走らせるまでを、
紹介していきます。

build_runnerが走ると、変換処理が走ります。

  • 変換対象のファイルを指定する
  • 変換対象のファイルを呼び出して、アレコレ処理する

この2つを実際に試してみます。

https://github.com/kyorohiro/dart.test.build_runner/tree/master/hello

lib/builder.dart
import 'package:build/build.dart';
import 'dart:async';

Builder helloBuilder(BuilderOptions options) {
  return new HelloBuilder();
}

class HelloBuilder implements Builder {
  // 変換する
  // 今回は、ログ表示するだけ
  FutureOr<void> build(BuildStep buildStep) async {
    print(">> ${buildStep.inputId}");
  }

  // 対象のファイルを指定する
  Map<String, List<String>> get buildExtensions {
    return {".dart": const [".g.dart"]};
  }
}

こんな感じで書けます。

また、 Builder の Factory がある場所を指定してあげます。

build.yaml
builders:
  helloBuilder:
    import: "package:hello/builder.dart"
    builder_factories: ["helloBuilder"]
    build_extensions: {".dart": [".g.dart"]}
    build_to: source
    auto_apply: root_package

で、完成。
実際に使ってみましょう。

https://github.com/kyorohiro/dart.test.build_runner/tree/master/hello_test

pubspec.yaml の dependecies に 作成した物を追加して

dev_dependencies:
  hello:
    path: ../hello
  build_runner: any

以下のコマンドを叩くと、 ビルド対象の xxx.dart といったコードを一覧表示してくれます。

pub run build_runner clean
pub run build_runner build

終わり。

次回

package:analyzer について解説します。
その5くらいで、 annotation を利用して、アレコレできるようになる予定です。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away