Node.js
npm
ライブラリ
webpack

Webpackでライブラリを作る

npmには多数のライブラリが存在しますが、自分でライブラリを作ろうとしたところ、正しい設定にたどり着くまでにちょっと手間取りました。


ライブラリの特徴

ブラウザやNode向けのプロジェクトの場合、ビルドした後は読み込んで使うだけなので、外部との関係性を考える必要はそこまで大きくありません。一方で、ライブラリの場合は、


  • ライブラリを読み込む側との連携(CommonJS、ES6 Module、AMD、UMD)

  • ライブラリ内で使うライブラリの切り離し(そのままにすると、他のライブラリを取り込む形となってしまい、あとで依存ライブラリを差し替えることができなくなる)

といった処理が必要となります。ただ、これらはWebpackでも実現できます。


ライブラリモードの利用(&エクスポート)

まず、Webpackをライブラリのビルドに使いたい場合、output.libraryに名前を指定します。この名前は、グローバルにオブジェクトを出すときにも使いますので、JavaScriptの変数名にしておけるものを使うことをおすすめします。

そして、output.libraryTargetで、どのようなライブラリ形式にするかを指定します。



  • var(デフォルト)…output.libraryで指定した変数を宣言して、そこに代入する


  • thiswindowglobal…それぞれ指定したオブジェクトの、output.library名のプロパティとして代入する


  • commonjsexports[output.library]に代入する


  • commonjs2module.exportsに代入する(output.libraryは影響しない)


  • amddefine()で登録する


  • umdexportsmodule.exportsdefine()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という名前で参照させる」ということになります。大文字小文字やハイフン入りなど、ロード方法によって参照すべき名前が違う場合は、それぞれに指定できます。


外部リンク