Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

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

$
0
0

この記事は ミクシィグループ 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"}}],asynccompleted(){this.gitInit()awaitthis.npmInstall()this.showProjectTips()}}

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

constconfig={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氏のライブラリです

Viewing all articles
Browse latest Browse all 8691

Trending Articles