中安拓也のブログ

プログラミングについて書くブログ。 Twitterやってます @l08084

【TypeScript】npmパッケージでコンパイル後のJSファイルをgit管理の対象外にする

はじめに

f:id:l08084:20210619164051p:plain
コンパイル後のJSファイル(distディレクトリ)がgit管理されてしまっている

npmのライフサイクルスクリプトであるprepublishOnlyを使うことで、コンパイル後のJSファイルをgit管理下から除外することができます。

今回は、前回TypeScriptで作成したnpmパッケージeslint-plugin-lookbehind-assertionsのコンパイル後のJSファイル(distディレクトリ)をgit管理の対象外にしていきます。

環境

npmのバージョンは7.17.0です。

$ npm -v
7.17.0

prepublishOnlyの設定

まず、.gitignoreを使って、git管理したくないコンパイル後のJSファイル(distディレクトリ)をgit管理の対象外に設定します。

.gitignore

dist

続いて、npm publish前に呼び出されるライフサイクルスクリプトであるprepublishOnlypackage.jsonに設定します。

package.json

  "scripts": {
    "build": "tsc",
    "clean": "rimraf dist",
    "lint": "npx eslint . --ext .ts",
    "test": "jest",
    "test-sample": "eslint src/samples/sample.ts",
    "prepublishOnly": "npm run clean && npm run build"
  },

prepublishOnlyでは、コンパイル後のJSファイルの削除とTSファイルのコンパイル(distディレクトリの作成)を呼び出しています。

"prepublishOnly": "npm run clean && npm run build"

こうすることで、npm publishの直前でdistディレクトリが作成されるため、npmレジストリにはdistディレクトリも含まれた状態でパッケージが公開されます。

動作確認

試しにnpmパッケージeslint-plugin-lookbehind-assertionsを公開してみます。

$ npm version patch
v1.0.1
$ npm publish

> eslint-plugin-lookbehind-assertions@1.0.1 prepublishOnly
> npm run clean && npm run build


> eslint-plugin-lookbehind-assertions@1.0.1 clean
> rimraf dist

... 
> eslint-plugin-lookbehind-assertions@1.0.1 build
> tsc

...

+ eslint-plugin-lookbehind-assertions@1.0.1

npm publishが実行される前にprepublishOnlyが呼び出されてdistディレクトリが作成されていることがわかります。

参考サイト

npmにライブラリを公開してみよう | 株式会社LIG

npm の prepublish と prepare の変遷 - Qiita

npm prepublishOnlyでビルドを呼んではいけない - Qiita