【webpack】CommonJS に対応していない JS を exports-loader で華麗に対応する
スライドメニューの実装に sp-slidemenu を fixed 対応した以下のライブラリを使用した。
このライブラリは npm にも bower にも登録されていない。
bower.json
があれば bower install
も可能だろうが、無いので npm で github のパスを指定してインストールする。
※ git submodule
はオペレーションの関係で今回使えない。
$ npm install --save-dev git://github.com/tokunagakazuya/sp-slidemenu#0.1.2-release
▼ インストールが成功すると、node_modules 直下に sp-slidemenu.js ディレクトリが出来る。
node_modules/sp-slidemenu.js/ ├─Gruntfile.js ├── README.md ├─package.json ├─sample │ ├─css │ │ └── styles.css │ ├─demo1.html │ ├─demo2.html │ ├─demo3.html │ ├─demo4.html │ ├─demo5.html │ └─img │ └── menu_button_back.png ├── sp-slidemenu-min.js └── sp-slidemenu.js
CommonJS に対応していないので exports-loader
を導入する。
$ npm install --save-dev exports-loader
次に webpack を設定する。
▼ webpack.config.js(必要なところだけ抜粋)
var path = require('path'); var pathToSpSlidemenu = path.join(__dirname, 'node_modules', 'sp-slidemenu.js', 'sp-slidemenu.js'); module.exports = { resolve: { alias: { SpSlidemenu: pathToSpSlidemenu, }, }, module: { loaders: [ { test: pathToSpSlidemenu, loader: 'exports?SpSlidemenu' }, ], }, };
後はソース内で呼び出すだけ。
var SpSlidemenu = require('SpSlidemenu');
設定で何をやっているかというと、resolve.alias
で node_modules/sp-slidemenu.js/sp-slidemenu.js
までのパスにエイリアスをはり、require('SpSlidemenu')
で呼び出せる様にしている。
※パスが通っていれば、別にエイリアスをはる必要は無いと思う。
また、CommonJS に対応する為、module.loaders
にて require('SpSlidemenu')
が実行されたら exports-loader を発動するように設定している。
exports?SpSlidemenu
とすることで、require('SpSlidemenu')
を実行した元ソースに sp-slidemenu.js の内容がマージされ、更に module.exports = SpSlidemenu;
が自動付与される。
exports-loader の使用例がネット上にあまり無くて困った。
環境
- webpack 1.5.3
- exports-loader 0.6.2