【賞味期限切れ】webpackちゃんと理解しとこ browserifyなライブラリ(pixi.js)をrequireしようとした編

# 注意 この記事は
- すでに古くなっています
- 関連ライブラリのバージョンに関する記載がなく不完全です
- もっと新しくて良い記事があります。 http://qiita.com/toris-birds/items/f4cda3fc7d5d573061d2

# 元々の記事

[webpackの取説](http://webpack.github.io/docs/)はもうだいたい読んでしまったが書くペースが追いついていないので、諦めて現状いろいろ触ってるところまでスキップして書く。

[わからなかった設定編](http://qiita.com/umezo@github/items/40135fe443abf741db1f) <- prev

~~今回は、browserifyにより変換・配布されているファイルに依存するようなアプリのbundleを作成する方法を調べる。
browserifyされたファイルとして今回は適当にpixi.jsを例とする。~~

いきなり具体的な利用法の話になってしまったが、もともとはbrowserifyされたファイルの読み込みについて調べていたが、
その方法が対処療法でしかなかったのでこうなった。

本記事ではpixi.jsをwebpackで扱いながらwebpackでbrowserifyなライブラリを扱うことを学んでいった経緯を書く。


# せっかちな人向け
- pixi.jsはbrowserifyされている
- [brfs](https://github.com/substack/brfs)というモジュールに依存している (`require('fs')`としている
- webpackはデフォだとこれをうまく解決できない
- いいから黙って[transform-loader](https://github.com/webpack/transform-loader)使え
    - `?brsf` を添えて

設定ファイルでちゃちゃっとやれるかとおもいきや、loaderでの解決。
やはりwebpackの使いこなしのキモはloaderなのか

いかログ

## pixi.jsはrequireするとエラー
webpackは基本的にrequireにhookして、ファイルの解決をするので何とかしてrequireしなければならない。

- `npm install pixi.js webpack`
- webpack.config.jsをこんな感じにして

```js
module.exports = {
  entry: "./start.js",
  output: {
    filename: "bundle.js",
    path: __dirname + '/dest'
  }
};
```

- start.jsをこうして

```js
var PIXI = require("pixi.js");
console.log(PIXI);
```

- `webpack` すると、以下の様なエラーが沢山でる。

```js
ERROR in ./~/pixi.js/src/filters/ascii/AsciiFilter.js
Module not found: Error: Cannot resolve module 'fs' in /...../node_modules/pixi.js/src/filters/ascii
 @ ./~/pixi.js/src/filters/ascii/AsciiFilter.js 3:9-22
```

~~なんでfsモジュールなんかrequireしてるのかさっぱりわからないが、とにかく読み込めない。~~
[brfs](https://github.com/substack/brfs)というbrowserify用のトランスフォーマ（？たぶん）で、`readFile`なんかを事前に処理して静的な文字列にしたりできるらしい。

なおfsモジュールはnodeの組込みモジュールなので、普通は見つかるはずだが、 __webpackがwebをtarget__ にbundleしようとしているのでfsは見つからなくなっている。(`target:"node"`を足せば見つかるようになるが、今回はあくまでweb向けのbundleを作るという前提



## brfsをtransform-loaderでよめ
[`script-loader`](https://github.com/webpack/script-loader)などで無理やり読み込んだりもできるが(エラーが出でないだけで動かないだろう)、[この辺り](https://github.com/pixijs/pixi.js/issues/1854)を読んでいると、[transform-loader](https://github.com/webpack/transform-loader)を使っている人がいる。

調べてみると、これは __browserifyのtransformerをwebpackのloaderとして使えるようにするローダ__ でまさに今回の件を解決する方法としてベストっぽかった。

というわけで

- `npm install transform-lader brfs` して
- webpack.config.jsをこんな感じにして

```js
module.exports = {
  entry: "./start.js",
  output: {
    filename: "bundle.js",
    path: __dirname + '/dest'
  },
  module:{
    loaders:[
      {
        test:/pixi.js/,
        loader:"transform?brfs"
      }
    ]
  }
};

```

- `npm run build` が通る

```
$ npm run build

> pixi-webpack@1.0.0 build /Users/.......
> webpack

Hash: f572702361c88f3dca9b
Version: webpack 1.13.1
Time: 2007ms
    Asset    Size  Chunks             Chunk Names
bundle.js  858 kB       0  [emitted]  main
   [0] ./start.js 50 bytes {0} [built]
    + 136 hidden modules
```


# まとめ
- pixi.jsはbrowserifyでビルドされている
- browserifyにはtransformという仕組みがある
- `npm install pixi.js` から `require('pixi.js')` するとbrowserifyされてないものが読み込まれる
- このためtransformerによって事前処理される前提のコード(`fs`)をwebpackがコンパイルできない
- webpackのloaderにtransform-loaderがある
- これはbrowserifyのtransformに相当する処理を行うことができる
- これらの仕組みをつかってpixi.jsをrequireおよびコンパイルできるようになる

# 感想
- webpackの勉強してたらbrowserifyにも詳しくなってきた(=詳しくならざるを得なかった
    - たとえばbrowserifyなライブラリをwebpackなライブラリから利用して同様のエラーになった場合、browserifyのtransformerを知らないと解決できない
    - こんな世界本当にあってるんだろうか
- js界隈どんどんめんどくさい感じになってくなー
- だが覚えた