bulkifyを使ってモジュールが増えた場合の設定を自動化する

本日の記事はメモレベルなので、参考程度に。

昔Qiitaで書いたのですが、（もう内容は古い）

qiita.com

browserifyを使っていて、ファイルが増える度手動でimportして、設定を追加するのは面倒なので、自動化したい場合にbulkifyが使えます。

github.com

例えば、react-routerのコードで

import Foo from './components/Foo';
import Bar from './components/Bar';
import Baz from './components/Baz';

// ...省略

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="foo" component={Foo}/>
      <Route path="bar" component={Bar}/>
      <Route path="baz" component={Baz}/>
    </Route>
  </Router>
), document.body)

↑だと都度手動で追加する必要がありますが、 ↓のように自動化できます。

import  _ from 'lodash';

const bulk = require('bulk-require');  // これrequireじゃないとダメ
const modules = bulk(__dirname, './components/*.js');

// ...省略

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
    {
        _.map(modules.containers, (component, name) => {
          const path = name.toLowerCase();
          return <Route key={path} path={`/${path}`} component={component.default} />;
        })
    }
    </Route>
  </Router>
), document.getElementById('root'));

package.jsonより必要な箇所のみ抜粋

{
  "devDependencies": {
    "babel-plugin-transform-inline-environment-variables": "^6.3.13",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-2": "^6.3.13",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "bulkify": "^1.1.1"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "stage-2",
            "react"
          ]
        }
      ],
      "bulkify"
    ]
  }
}

※ なお、babel or bulkify or babelify or browserify どいつかのバグでcomponent.defaultと書かないと現状、動かなくなってしまっている... 数ヶ月前はcomponentでモジュールそのモノが取得できたのだが☠

ちなみに

webpackでもできるそう。

使ったことないけど、marty.jsのドキュメントで知りました。

martyjs.org

webpackなら上記、component.default大丈夫なんだろうか。