💨
webpackでビルドしたファイルをimportする方法
始めに
こちらにgithubリポジトリからnpm installする方法を書きましたが、ビルドなしのものでしか使えません。
今回はwebpackでビルドしたファイルをimportできるようにする方法を紹介します。
webpackでビルドしたファイルをimportできるようにする
webpackの設定で、output.libraryTargetをumdにするだけでimportで使えるようになります。
webpack.config.js
module.exports = {
// 他の設定は省略
output: {
filename: 'lib.js'
library: 'LibraryName',
libraryTarget: 'umd'
}
};
ビルドファイルに外部モジュールを取り込んでいる場合
axiosとか、他のモジュールをimportしている場合、そのままだとこれらのモジュールも全て取り込んだファイルになってしまいコードが増えてしまいます。また、例えば他の場所でaxiosを使った場合、ここで使っているモジュールと別なaxiosを使ってしまうことになり、挙動がおかしくなってしまう可能性があります。
そこでexternalsオプションを指定してそれらのモジュールはrequireで外部から取り込むようにします。
webpack.config.js
module.exports = {
// 他の設定は省略
output: {
filename: 'lib.js'
library: 'LibraryName',
libraryTarget: 'umd'
},
// ビルドファイルに取り込まず、改めてrequireさせるモジュール
externals: [
'axios',
'p-cancelable',
'url-join'
]
};
改めてrequireするというのは、実際にビルドしたファイルを見ると早いと思います。
以下がビルドしたファイルの一部ですが、ビルドしたコードの中でrequireが呼ばれています。
つまりこのファイルをimportしたら中でrequireが呼ばれて、このファイルにはaxiosなどのモジュールは含まれていないということになります。
ビルドしたファイルの一部
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
// ここでexternalで定義したモジュールがrequireで呼ばれる
module.exports = factory(require("axios"), require("p-cancelable"), require("url-join"));
else if(typeof define === 'function' && define.amd)
define(["axios", "p-cancelable", "url-join"], factory);
else if(typeof exports === 'object')
exports["CancelableAPI"] = factory(require("axios"), require("p-cancelable"), require("url-join"));
else
root["CancelableAPI"] = factory(root["axios"], root["p-cancelable"], root["url-join"]);
})(window, function(__WEBPACK_EXTERNAL_MODULE_axios__, __WEBPACK_EXTERNAL_MODULE_p_cancelable__, __WEBPACK_EXTERNAL_MODULE_url_join__) { ...
出力されたファイルをエントリーポイントにする
後はpackage.jsonのmainにビルドされたファイルを指定すれば完了です。
externalsで定義したパッケージはビルドしたファイルに含まれていないので、dependenciesに書く必要があります。
package.json
{
"name": "mylib",
"version": "1.0.0",
"description": "",
"main": "lib.js",
"dependencies": {
"axios": "^0.18.0",
"p-cancelable": "^1.0.0",
"url-join": "^4.0.0"
}
}
サンプルリポジトリ
サンプルでキャンセル可能なAPIリクエストパッケージを作りました。
インストールして使う場合は以下のようにします。
$ yarn add TakanoriOnuma/cancelable-api
これを使ったサンプルコードはこちらにあります。
参考記事
Discussion