注意この記事は

すでに古くなっています
関連ライブラリのバージョンに関する記載がなく不完全です
もっと新しくて良い記事があります。 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界隈どんどんめんどくさい感じになってくなー
だが覚えた

注意 この記事は

元々の記事

せっかちな人向け

pixi.jsはrequireするとエラー

brfsをtransform-loaderでよめ

まとめ

感想

注意この記事は