Katashin .info

JavaScript ライブラリを npm で公開するためにやっていること

最近、何度か自作のライブラリを npm にアップしています。その時にやっていることを書き留めておきます。

前提条件 #

公開時にビルドをするように設定 #

ビルド後のファイルはバージョン管理システムにはコミットするべきではありません。したがって、 npm publish をするタイミングでビルドを走らせて、生成されたファイルを公開するようにします。これを行うには、 prepublish を使うのが良いです。 prepublish に指定されたコマンドは、 npm publish の直前に実行されるようになります。

// package.json
{
  ...
  "scripts": {
    "prepublish": "gulp build"
  }
  ...
}

公開の必要がないファイルを無視 #

ライブラリを使う側にとってはビルド後のファイル以外 (テストコードなど) は必要ありません。npm publish 時に除外したいファイルは .npmignore で指定することができます。.npmignore は .gitignore と同じような書き方で書けます。僕が作っているライブラリだと、babel や eslint の設定ファイル、gulpfile、ビルド前のファイルなどを除外しています。

# .npmignore
/.babelrc
/.eslintrc
/gulpfile.js
/src/

main にビルド後のファイルを指定 #

CommonJS や AMD による読み込み対応しているライブラリの場合、package.json の main を指定するべきです。main に指定したファイルが、require('<ライブラリ名>') と書かれた時に読み込まれるようになります。

main にはビルド後のファイルを指定します。ライブラリの使用者が、作成者と同じ設定で module loader を使っているとは限らないためです。

// package.json
{
  ...
  "main": "dist/library.js"
  ...
}

ビルド後のファイルにライセンスコメントを付与 #

以下の様な感じで、gulp-header を使い、ビルド後のファイルの頭にライセンスコメントを付けています。コメントの中身は別ファイルに分けて BANNER みたいなファイル名にしています。また、ライブラリ名やバージョンなどは package.json の中から読み込んでいます。

// gulpfile.js
const gulp = require('gulp')
const fs = require('fs')
const header = require('gulp-header')

gulp.task('header', () => {
  return gulp
    .src(['dist/**/*.js'])
    .pipe(
      header(fs.readFileSync('./BANNER', 'utf-8'), require('./package.json')),
    )
    .pipe(gulp.dest('dist'))
})

まとめ #