npmによる開発環境の構築の手間を最小限に減らすため、オリジナルパッケージを作る

１．環境構築が面倒くさい

　私が記事を書くといつも面倒くさいがキーワードになっている気がします。とにかく開発を行っていると面倒くさいことが沢山出てくるのです。新しいロジックを組んだりするのは良いのですが、一度やった作業を何度も繰り返す不毛な時間が面倒で仕方がありません。いかにしてこの無駄を省くか、そんなことを常に考えていることはそれです。

２．試しにReact用の環境構築パッケージを作る

　まずはReact+TypeScriptを使うための環境構築を試してみます。これをやる上で最も面倒な部分は、WebPackと依存モジュールの追加作業です。create-react-appを使えば一発ですが、カスタマイズするときに設定をejectしてから修正することになるので、どうせなら最初から見える場所にあった方が楽です。ということでそういうものを作ってみました。

３．React+TypeScriptを即使えるようにする

　setup-template-reactを使います

　適当な空ディレクトリを作り、以下のコマンドを順番に実行していきます。

npm -y init
npm -D i setup-template-react
npm i
npm start

すると以下のような内容が追加されます

root/  
　├ dist/ (ファイル出力先、ビルドするまで生成されない)  
　└ front/ (フロントエンド用ディレクトリ)  
　　├ public/ (リソースHTMLファイル用)  
　　│　└ index.html  
　　├ src/ (JavaScript/TypeScript用ディレクトリ)  
　　│　├ .eslintrc.json  
　　│　├ index.tsx  (Reactのサンプルコード)
　　│　└ tsconfig.json  
　　└ webpack.config.js  

　これで「今日は世界！」という表示を行う最低限のReactのサンプルが動作します。setup-template-reactをインストールした時点で、カレントパッケージの環境を自動的に更新するようになっています。既にプロジェクトが存在するディレクトリでも実行可能です。バックエンド側の構築が終わっていて、フロントエンド側の設定を追加したい場合などにも利用できます。

　ちなみにRailsにFullSPA環境を作るためのパッケージも用意しています。setup-template-rails-reactを使うと、既存のパッケージ内に別枠でReactのビルド環境を生成し、assetsに出力するように構成してあります。

４．これを実現するには

　実は本当のメインのお話は環境構築を簡単にすることではなく、環境構築を簡単にするための環境構築を簡単にするための内容です。間違えて二回書いたわけではありません。この環境構築パッケージを作るのを簡単にするために、setup-templateというパッケージを使用します。

4.1 環境構築用パッケージの作り方

　環境構築用のパッケージを作るため、適当な空ディレクトリを作ってください。

npm -y init
npm i setup-template

　以下のような構成でディレクトリとファイルを作成します

root/  
　├ template/ この中に入れたファイルが、インストール時のRootに展開される
　└ options/  
　　├ package.json ターゲットに対して追加設定(結合される)を入れておく  
　　└ message.txt  インストール時のメッセージ  

　このようにファイルを用意しておくと、パッケージインストール時にファイルが展開され、ターゲットのpackage.jsonの内容が更新されるようになります。

　後は環境構築用パッケージのpackage.jsonのnameに以下の設定を行います。その他の部分は、特に書き換える必要はありません。

{
  "name": "適切なパッケージ名",
  "scripts": {
    "postinstall": "npx setup-template"
  },
}

ここまで出来たら

npm publish

を行いnpmに登録しておくことによって、いつでも環境設定が可能になります。

５．まとめ

　今回紹介したsetup-templateは、既に存在するプロジェクト内に対して、必要なファイルの展開とpackage.jsonの合成を行うための機能を提供します。オリジナルの環境構築パッケージを作りたいと思った方は、ぜひ使ってみてください。