プロジェクトテンプレート作成コマンドの実装
2025年 02月 10日 月曜日
背景
プロジェクト作成時に以下のような課題がありました
- プロジェクト間での設定の統一がしたい
- リンターなどの設定のコピペが手間
- GitHub Templatesでは柔軟な構成が作りづらい
これらを解決するため、カスタムnpxコマンドを作成しました。
実装方法
1. プロジェクト構成
run.tsにコマンドを実装していきますtemplatesディレクトリにサブモジュールを作成します- サブモジュールにしておくことで各テンプレートでの依存関係のアップデートなどを行いやすくしています
├── package.json # パッケージ設定
├── run.ts # コマンド実行ファイル
└── templates/ # テンプレート格納2. コマンドの作成
対話式のプロンプトで必要な情報を収集します。 今回はプロジェクト名とテンプレートを選択するようにします
const response = await prompts([
{
type: "text",
name: "projectName",
message: "プロジェクト名を入力:",
initial: "my-project",
},
{
type: "select",
name: "template",
message: "使用するテンプレート:",
choices: [
{title: "Vite-React-Typescript", value: "react-ts"},
{title: "Remix", value: "remix"},
],
},
])入力されたプロジェクト名, 選択されたフレームワークを元に、必要なファイルをコピーします。
const templateDir = path.join(__dirname, "templates", `${response.template}`)
const targetDir = path.resolve(process.cwd(), response.projectName)
try {
fs.mkdirSync(targetDir, {recursive: true})
execSync(`cp -r ${templateDir}/. ${targetDir}`)
} catch (error) {
console.error("Error during copy:", error)
}3. パッケージの公開
package.jsonを以下のように設定：
{
"name": "@username/create-project",
"version": "1.0.0",
"description": "プロジェクトテンプレート作成ツール",
"bin": {
"create-project": "./bin/run.js"
},
"repository": {
"type": "git",
"url": "https://github.com/username/create-project"
},
"scripts": {
"build": "rimraf dist && ncc build ./run.ts -o dist/ && rimraf dist/templates && cp -r templates dist/templates" // 普通にビルドしてしまうと隠しファイルがコピーされずに必要なファイルがコピーされないため無理やりコピーする
}
}npm publishで公開後、npm install @username/create-project@versionすることでnpx @username/create-projectで利用可能になります。
まとめ
- 自分専用のコマンドを作成することで、プロジェクト作成時の手間が省けました
- フロントエンドに限らず気になるフレームワークがあるのでそちらについても追加していこうと思っています
この記事をシェア