npmを自分専用の開発環境置き場にする

１．開発環境の初期状態構築の面倒くささ

　Node.jsを使った開発を行う場合、特にフロントエンド開発の場合などは、必要になる設定ファイルが多いため、それを苦痛と思う人も少なくないだろう。

　webpackやtypescript、依存モジュールの設定等、用意しなければならないものは多い。
　私の場合、最低でも以下のファイルを用意する。

.gitignore
.npmignore
webpack.config.js
package.json
index.html
index.tsx

　これに対処するのなら、どこかにテンプレート用のディレクトリを用意しておき、そこから持ってくれば良い。
　しかしもっと簡単にやる方法があれば利用したい、そんなことを考えている人もいるだろう。
　そんな人に紹介したい、npmに自分のテンプレートを登録して簡単に呼び出す方法だ。

２．npmにテンプレートを設置する方法

　npmでインストールしたパッケージは、普通にやるとnode_modulesの中に入るだけである。欲しいのは、インストールしたら全ての環境構築が終わっている状態である。これを実現するためにはnpmのscript機能を活用することである。

package.json

{
  "scripts": {
    "postinstall":"コマンド"
  }
}

というのを入れておけば、パッケージインストール時に任意のコマンドを実行することが出来る。ここで必要なファイルをコピーするスクリプトを設置すれば、インストールと同時に環境構築を行うことが出来るのだ。

３．自動環境設定パッケージの作成

https://www.npmjs.com/へ行って、ユーザ登録
ユーザを作らないと、パッケージの登録が出来ないので必須作業だ
テンプレートパッケージの用意
テンプレートとなる初期パッケージを用意する
テンプレートパッケージにfs-extraを追加
ファイルのコピーで必要となるので
npm i fs-extra
を実行しておく
ファイルコピースクリプトの準備
以下のスクリプトはnode_modulesに入っているテンプレートパッケージのファイルを丸ごとコピーするようになっている
最後に npm i を出力しているのは、スクリプト終了後にパッケージのインストール処理をするからだ

bin/init.js

#!/usr/bin/env node
const path = require('path');
const fs = require('fs-extra');

if(fs.existsSync('../../../bin/init.js'))
  process.exit(-1);
console.log('copy template')
fs.copySync(path.resolve(__dirname, '..'), '../../../',{overwrite:true});
console.log('npm i');

package.jsonの設定
nameに @npmのユーザ名 を指定することによって、パッケージにスコープを付けることが出来る。
ユーザ名スコープを使えば、グローバルなパッケージ名を汚染することは無いので、気兼ねなく自分のテンプレートを設置することが出来る。

　publishConfigに設定しているのは、公開パッケージという宣言だ。
　スコープを使う場合は必要になる。課金すればプライベート設定も可能だ。

　postinstall項目には実行するスクリプトが記述してある。
　コピーが終わったら、依存パッケージのインストールを行う。

　これがnpmからのインストール時に実行される。
　今回、package.jsonごと環境をコピーするため、npm i による無限ループ発生を阻止する細工を入れてある。

package.json

{
  "name": "@npmのユーザ名/template01",
  "publishConfig": {
    "access": "public"
  },
  "scripts": {
    "postinstall": "(node bin/init.js && cd ../.. && npm i) || exit 0",
  },
}

　以上の項目を、テンプレート用のpackage.jsonに追加する

パッケージをnpmに登録
npm publish
内容を変更して再登録する場合は、package.jsonのversionを上げるのを忘れないようにしよう。

以上でテンプレートパッケージの登録は完了だ

４．テンプレートの呼び出し

環境構築は新しいディレクトリを作って以下のように行う。

npm -y init
npm i @npmのユーザ名/template01

これでテンプレートに登録した開発環境が再現される。

５．お試し

どんな感じになるのか試したいなら、私が用意したテンプレートをインストールして確認して欲しい。

npm -y init
npm i @sora_kumo/template01
npm start

これで私が使っている環境が再現され、以下のようなの実行結果が表示されるはずだ。

６．使い道

　最小限のコマンドで簡単に環境が再現できるようになるので、例えば勉強会などで初期状態を揃えたい場合などに使うことも出来るだろう。
　また、技術系の解説記事を書く場合も、環境を揃えることが出来れば、実際に試しながらという流れで説明できる。
　npmにpublishが敷居が高く感じている人も練習になるので、ぜひ試してみて欲しい。