2noの日記

メモ用

【webpack】CommonJS に対応していない JS を exports-loader で華麗に対応する

スライドメニューの実装に sp-slidemenu を fixed 対応した以下のライブラリを使用した。

github.com

このライブラリは 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.aliasnode_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