chibivite CLIのビルド

🎯 このページのゴール

chibivite CLIをTypeScriptで実装してビルドできるようにしましょう

chibivite CLIの詳細をTypeScriptで実装できるようにして、より堅牢なコードベースで開発できるようにしましょう！

このハンズオンでは、Viteと同様にRollupを使ってビルドをおこないます。

まずは、Rollupをインストールして基本のビルドパイプラインを設定しましょう！

bash

cd packages/chibivite

bash

pnpm install rollup@4.17.2

パッケージのバージョンについて

ほとんどのパッケージはセマンティックバージョニングを採用しているため、マイナーバージョンの差分は安全に適用することができます。実際のところ、Rollupのバージョンを指定せずに以下のようにインストールしても、それがRollup v4系であれば基本的には問題ありません。

bash

pnpm install rollup

しかし、まれにマイナーバーアップデートにも破壊的変更が含まれている場合があります。このハンズオンでは、このハンズオンにしたがって開発したchibiviteが将来にわたって動作することを保証するため、すべての依存パッケージのバージョンを厳密に指定してインストールします。

以下のように package.json が書きかわっていれば成功です。

json

{
  // ...
  "dependencies": {},   
  "dependencies": {     
    "rollup": "4.17.2"
  },                    
  // ...
}

つぎに、rollup.config.mjs を作成して、以下のコードをコピーしましょう。

import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { defineConfig } from 'rollup'

const __dirname = fileURLToPath(new URL('.', import.meta.url))

export default defineConfig({
  input: path.resolve(__dirname, 'src/cli.mjs'),
  output: {
    dir: './dist',
    format: 'esm'
  }
})

Rollupでビルドをおこなうためには、入力元（エントリーポイント）と出力パス、そして出力形式の設定が必要です。それぞれ、input オプション、output.dirオプション、output.formatオプションに対応しています。

__dirname について

rollup.config.mjsはECMAScript Module（ESM）であるため、CommonJS Moduleが提供している__dirname定数が利用できません。 ESMでは、代わりに fileURLToPath(new URL('.', import.meta.url)) のイディオムを使って同様の値を得ることができます。今後、このイディオムを毎回記述しなくてすむように、__dirname という名前の変数に代入して利用しています。

結果として、path.resolve(__dirname, 'src/cli.mjs') は /path/from/root/dir/to/packages/chibivite/src/cli.mjs に解決されます。

src/cli.mjs はまだ存在しないため、ファイルを作成して、以下のコードをコピーしましょう。

console.log('Hello, chibivite!')

Rollupを実行できるようにnpm scriptを定義しましょう。

json

{
  // ...
  "scripts": {},                                 
  "scripts": {                                   
    "build": "rollup --config rollup.config.mjs"
  },                                             
  // ...
}

この状態で以下のコマンドを実行してみましょう。dist/cli.jsが作成されれば成功です。

bash

pnpm run build

以下のコマンドで、ビルドされた dist/cli.js を実行してみましょう。ターミナルに Hello, chibivite! と表示されれば成功です。

bash

node dist/cli.js

bin/chibivite.jsを以下のように変更して、bin/chibivite.jsからdist/cli.jsを呼び出すようにしましょう。これで、プレイグラウンドでビルドしたCLIを利用できるようになります。

#!/usr/bin/env node

function start() {
  console.log('Hello, chibivite!')     
  return import('../dist/node/cli.js') 
}

start()

プレイグラウンドで以下のコマンドを実行してみましょう。これまでと変わらずターミナルに Hello, chibivite! と表示されれば成功です。

bash

cd path/to/playground

bash

pnpm run dev

なぜbin/chibivite.jsとしてビルドしないのか

Rollupを以下のように設定してビルドの出力先を直接 bin/chibivite.js にしても、プレイグラウンドでビルドしたCLIを利用できます（shebangのあつかいは省略しています）。

export default defineConfig({
  input: path.resolve(__dirname, 'src/cli.mjs'),
  output: {
    dir: './bin',
    entryFileNames: 'chibivite.js',
    format: 'esm',
  },
})

このハンズオンでは、Viteにならいビルドの出力先を別途設定しています。くわしくはコマンドラインインターフェースのページを参照してください。

ここから、TypeScriptをJavaScriptにトランスパイルするための設定をしていきましょう！

まず、Rollupを使ってTypeScriptをトランスパイルするために必要なパッケージをインストールしましょう。

bash

pnpm install -D @rollup/plugin-typescript@11.1.6 tslib@2.6.2

以下のように package.json が書きかわっていれば成功です。

json

{
  // ...
  "devDependencies": {}                    
  "devDependencies": {                     
    "@rollup/plugin-typescript": "11.1.6", 
    "tslib": "2.6.2"
  }                                        
}

つぎに、rollup.config.mjsを以下のように書きかえましょう。

import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { defineConfig } from 'rollup'
import typescript from '@rollup/plugin-typescript'

const __dirname = fileURLToPath(new URL('.', import.meta.url))

export default defineConfig({
  input: path.resolve(__dirname, 'src/cli.mjs'), 
  input: path.resolve(__dirname, 'src/cli.ts'),  
  output: {
    dir: './dist',
    format: 'esm',
  },
  plugins: [      
    typescript(), 
  ],              
})

そして src/cli.mjs を src/cli.ts にリネームしてTypeScriptファイルにしましょう。

bash

mv src/cli.mjs src/cli.ts

では、Rollupでビルドしてみましょう。ただし、src/cli.tsのコードにTypeScript特有の内容がふくまれていないため、トランスパイルできているかを確かめることができません。検証のため、以下のようにコードを書き換えてビルドしてみましょう。dist/cli.jsで型宣言が消えていれば成功です。

type MyType = true
console.log('Hello, chibivite!')

bash

pnpm run build

最後に tsconfig.json をセットアップしてTypeScriptの設定を完了しましょう。

packages/chibivite/tsconfig.json を作成して、以下のコードをコピーしましょう。

json

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "dist",
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "moduleDetection": "force",
    "lib": ["ESNext", "DOM"],
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "allowJs": true,
    "strict": true,
    "skipLibCheck": true,
    "noUncheckedIndexedAccess": true
  }
}

ここでは tsconfig.json の内容を詳細に説明することはしませんが、おおよそViteの設定を踏襲しています。

つぎに、 @rollup/plugin-typescript がこの tsconfig.json を読み込むようにしましょう。ソースマップを出力するために、Rollupの output オプションにも変更をくわえます。

// ...
export default defineConfig({
  // ...
  output: {
    dir: './dist',
    format: 'esm',
    sourcemap: true, 
  },
  plugins: [
    typescript(),                                         
    typescript({                                          
      tsconfig: path.resolve(__dirname, 'tsconfig.json'), 
      sourceMap: true,                                    
    }),
  ],
})

では、Rollupでビルドしてみましょう。dist/cli.jsで型宣言が消えていれば成功です。

bash

pnpm run build

検証がおわったら、型宣言はsrc/cli.tsから削除しましょう。

type MyType = true
console.log('Hello, chibivite!')

おめでとうございます！これでchibivite CLIをTypeScriptで実装してビルドできるようになりました！🎉

chibivite CLIのビルド ​

chibivite CLIのビルド