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

React アプリケーションのボイラープレート CLI を作って使っている話

この記事は ミクシィグループ Advent Calendar 2019 の5日目の記事です。

React で CLI というと create-react-app が有名です。
格好良いベースを作ってくれるのですが個人的には依存 package が多いので、自分用の CLI を作ってそちらを使っています。

@yami-beta/create-ts-app

TypeScript を使ったアプリケーションのベースを作る対話型のインターフェースを持った CLI ツールです。
https://www.npmjs.com/package/@yami-beta/create-ts-app
create-ts-app.gif
意外と色々な package を用意する必要がある ESLint + Prettier の設定を含めていたり、author や LICENSE を設定できます。
(あくまで個人用なので自分の好みによせたボイラープレートになっています)

現在は React のシンプルなボイラープレートしかありませんが

  • React, React Router, Redux 等が含まれた Single Page Application
  • express によるサーバアプリケーション

のボイラープレートを追加していく予定です。

仕組み

この CLI ですが SAO というライブラリを使って実装しています。
create-nuxt-app も SAO を利用していたりします)

以下のようなコードを書くことで対話型のインターフェースを用意したり、テンプレートからファイルをコピーやリネームといったことが出来ます。

module.exports = {
  prompts() {
    return [
      {
        name: 'name',
        message: 'What is the name of the new project',
        default: this.outFolder,
        filter: val => val.toLowerCase()
      }
    ]
  },
  actions: [
    {
      type: 'add',
      files: '**'
    },
    {
      type: "move",
      patterns: {
        "LICENSE_*": "LICENSE"
      }
    }
  ],
  async completed() {
    this.gitInit()
    await this.npmInstall()
    this.showProjectTips()
  }
}

@yami-beta/create-ts-app では このような実装 になっています。
一部を抜粋すると、以下のようにコマンド実行時の回答に応じて package.json に記載する依存関係を編集することも可能です。

const config = {
  actions() {
    const { answers } = this;
    return [
      // 略
      {
        type: "modify",
        files: "package.json",
        handler(data: any, filepath: string) {
          return {
            name: answers.name || data.name,
            version: answers.version || data.version,
            main: data.main,
            author: answers.author,
            license: answers.license || data.license,
            scripts: data.scripts,
            dependencies: {
              ...data.dependencies
            },
            devDependencies: {
              ...data.devDependencies,
              "@typescript-eslint/eslint-plugin": answers.features.includes(
                "eslint"
              )
                ? data.devDependencies["@typescript-eslint/eslint-plugin"]
                : undefined,
              "@typescript-eslint/parser": answers.features.includes("eslint")
                ? data.devDependencies["@typescript-eslint/parser"]
                : undefined,
              eslint: answers.features.includes("eslint")
                ? data.devDependencies["eslint"]
                : undefined,
              "eslint-config-prettier":
                answers.features.includes("eslint") &&
                answers.features.includes("prettier")
                  ? data.devDependencies["eslint-config-prettier"]
                  : undefined,
              "eslint-plugin-prettier":
                answers.features.includes("eslint") &&
                answers.features.includes("prettier")
                  ? data.devDependencies["eslint-plugin-prettier"]
                  : undefined,
              prettier: answers.features.includes("prettier")
                ? data.devDependencies["prettier"]
                : undefined
            }
          };
        }
      },
      // 略
    ].filter(Boolean);
  }
};

CLI を作るほどでもない場合

ボイラープレートは欲しいけれども CLI を作るほどでは無い、という場合もあるかと思います。
そういう場合は GitHub のテンプレートリポジトリでボイラープレートを活用する方法があります。

詳細は上記のドキュメントを参照してください。

まとめ

  • React アプリケーションのボイラープレートを生成する CLI を作っている
    • テンプレートからファイルをコピー、リネーム、編集することが出来るので複数のボイラープレート生成が可能
  • 手軽にボイラープレートを作る場合は GitHub のテンプレートリポジトリが活用出来そう

備考

  • SAO という見覚えのある名前ですが egoist 氏のライブラリです
Why not register and get more from Qiita?
  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