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

注意 この記事は

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

元々の記事

webpackの取説はもうだいたい読んでしまったが書くペースが追いついていないので、諦めて現状いろいろ触ってるところまでスキップして書く。

わからなかった設定編 <- prev

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

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

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

せっかちな人向け

• pixi.jsはbrowserifyされている
• brfsというモジュールに依存している (require('fs')としている
• webpackはデフォだとこれをうまく解決できない
• いいから黙ってtransform-loader使え
  • ?brsf を添えて

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

いかログ

pixi.jsはrequireするとエラー

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

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

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

• start.jsをこうして

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

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

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というbrowserify用のトランスフォーマ（？たぶん）で、readFileなんかを事前に処理して静的な文字列にしたりできるらしい。

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

brfsをtransform-loaderでよめ

script-loaderなどで無理やり読み込んだりもできるが(エラーが出でないだけで動かないだろう)、この辺りを読んでいると、transform-loaderを使っている人がいる。

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

というわけで

• npm install transform-lader brfs して
• webpack.config.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界隈どんどんめんどくさい感じになってくなー
• だが覚えた