npmには多数のライブラリが存在しますが、自分でライブラリを作ろうとしたところ、正しい設定にたどり着くまでにちょっと手間取りました。
ライブラリの特徴
ブラウザやNode向けのプロジェクトの場合、ビルドした後は読み込んで使うだけなので、外部との関係性を考える必要はそこまで大きくありません。一方で、ライブラリの場合は、
- ライブラリを読み込む側との連携（CommonJS、ES6 Module、AMD、UMD）
- ライブラリ内で使うライブラリの切り離し（そのままにすると、他のライブラリを取り込む形となってしまい、あとで依存ライブラリを差し替えることができなくなる）
といった処理が必要となります。ただ、これらはWebpackでも実現できます。
ライブラリモードの利用（&エクスポート）
まず、Webpackをライブラリのビルドに使いたい場合、output.libraryに名前を指定します。この名前は、グローバルにオブジェクトを出すときにも使いますので、JavaScriptの変数名にしておけるものを使うことをおすすめします。
そして、output.libraryTargetで、どのようなライブラリ形式にするかを指定します。
-
var（デフォルト）…output.libraryで指定した変数を宣言して、そこに代入する -
this・window・global…それぞれ指定したオブジェクトの、output.library名のプロパティとして代入する -
commonjs…exports[output.library]に代入する -
commonjs2…module.exportsに代入する（output.libraryは影響しない） -
amd…define()で登録する -
umd…exports、module.exports、define()、thisのどれかを使う
Node.jsとブラウザの両対応を考えるなら、umdを選んでおくのがいいでしょう。
webpack.config.js
module.exports = {
// 他の設定は省略
output: {
// 前略
library: 'SomeLibrary',
libraryTarget: 'umd'
}
}
他のライブラリの利用
以前にWebpack外からライブラリを供給するためにexternalsを使う方法を示しましたが、同じexternalsは、ライブラリ作成時にも「外部から供給するライブラリ」の指定のためにも使えます。
webpack.config.js
module.exports = {
// 他の設定は省略
externals: {
// 前略
riot: 'riot',
jquery: {
commonjs: 'jquery',
commonjs2: 'jquery',
amd: 'jquery',
root: 'jQuery'
}
}
}
前者のように文字列で指定すると、「import ~~ from 'riot'やrequire('riot')で参照するものを、それぞれの手法でriotという名前で参照させる」ということになります。大文字小文字やハイフン入りなど、ロード方法によって参照すべき名前が違う場合は、それぞれに指定できます。