タイトルは長いけど小ネタ。

以前 watchify を試すという記事で npm から入れた React を require すると Firefox デバッガに大量の React モジュールが表示されて辛いという問題に触れた。例えば以下のような感じで require や import すると、

// ES5
var React = require( 'react' );

// ES6
import React from 'react';

Chrome Developer Tools の Sources だとファイルがツリー表示されて npm 経由のものは node_modules フォルダに集約してくれる。しかし Firefox 付属のデバッガではファイル表示が階層化されないため npm 経由で入れたものは間接参照しているものも含めすべて並列に表示される。

そのため自前のソースを探すのが難しい。node_modules の react/package.json をみると main が react.js になっており、このファイルからは更に ./lib/React を export している。ここから更に require が続いてゆくため、それらがすべて Browserify 対象となり Source Maps などに含まれる。

一方 react/dist/react.js は Browserify で結合された単一ファイルのようである。ならばこれを読めばよいのでは？ということで参照を以下のように変更したら予想通り Firefox 標準デバッガには単体の react.js だけ表示された。

// ES5
var React = require( 'react/dist/react' );

// ES6
import React from 'react/dist/react';

React Add-on を利用したいなら参照パスを react-with-addons に変更すればよい。デメリットがあるとすれば参照パスが長いのと React 部分をデバッガで追うのが面倒になることぐらいか。

Node や npm を利用している開発者では常識なのかもしれないけど、私は npm で入れたものを require する場合はモジュール名だけ指定して配下は参照しないという先入観があり、恥ずかしながら気づかなかった。

この問題を回避するためにこれまで React は Bower 管理 (こちらは dist のものだけ含まれ require するとそれが参照される) していたけれど、これからはパッケージ管理を npm に一本化できそう。嬉しい。