WebPackのlibraryTargetによる出力結果の違いと、TypeScriptで吐いた.d.tsの悲しみ
WebPackでライブラリを作成する際、他のプロジェクトからWebPack経由でモジュールとして出力する際は amd 、HTMLの<SCRIPT>から非モジュールとして呼び出す場合は global を使っていました。ぶっちゃけていうと、内容をよく理解せずに使っているわけです。これではまずいので、 libraryTarget の設定でどう出力内容が変わるのかを確認してみることにしました。
出力内容
library の設定を JWF という名前にした時の結果をまとめました。
| libraryTarget | 一行目 |
|---|---|
| var | var JWF = |
| assign | JWF = |
| this | this["JWF"] = |
| window | window["JWF"] = |
| self | self["JWF"] = |
| global | window["JWF"] = |
| commonjs | exports["JWF"] = |
| commonjs2 | module.exports = |
| commonjs-module | module.exports = |
| amd | define("JWF", [], function() { return |
| amd-require | require([], function() { return |
| umd | (function webpackUniversalModuleDefinition(root, factory) { |
| umd2 | (function webpackUniversalModuleDefinition(root, factory) { |
| jsonp | JWF(/******/ (function(modules) { // |
| system | System.register("JWF", [], function |
設定によってwindowのプロパティになったりグローバル変数になったりしています。WebPackから使う場合はモジュールの体を成していれば上手くやってくれますが、<SCRIPT>から直接呼び出すライブラリとして使う場合は、自分できちんと対処する必要があります。とりあえず動いていたので気にしていませんでしたが、もっと早く確認すべき内容でした。
おまけ：TypeScriptの悲しみ
TypeScriptで開発したコードをWebPackで非モジュールのライブラリを生成した場合、問題になるのがTypeScriptの定義ファイルである .d.ts です。WebPackでモジュールとして開発し、<SCRIPT> から直接呼び出す形に libraryTarget を var や global 変更しても、.d.ts はモジュールの形式のままとなります。各機能のインスタンスが変数に入っているのに、それを利用したコードを書いても、開発環境の入力補完に対応せず、コンパイル時もエラーの山となります。
これの対処法を色々と調べたのですが、有用な情報はなぁんにも見つかりませんでした。これで困っている人は人っ子一人いないようです。無いものは作る、有るものですら作るが心情なので、結局自分で変換プログラムを作りました。やっていることはモジュール定義を全て削除、そのかわりnamespaceをlibrary名で作成し囲むというものです。TypeScriptのCompilerAPIを使えば、どこに何の定義があるかを簡単に調べられるので、普通に字句解析するより簡単に作ることが出来ました。欲しい人がいるならWebPackからすぐに使える形にしてnpmに登録することも可能です。しかしニッチすぎて需要は無いでしょう。