最近、何度か自作のライブラリを npm にアップしています。その時にやっていることを書き留めておきます。
前提条件
- ライブラリはビルドが必要なもの (webpack や Browserify などを使う)
- ビルド後のファイルを公開したい
公開時にビルドをするように設定
ビルド後のファイルはバージョン管理システムにはコミットするべきではありません。したがって、 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')); });
まとめ
- 公開の直前にビルドが走るように、
prepublish
にビルドを行うコマンドを指定 .npmignore
で公開の必要がないファイルを除外require('<ライブラリ名>')
で読み込めるように、main
にビルド後のファイルを指定gulp-header
を使ってライセンスコメントを付与