bundler動機ハリーポッターの作品中には『幻の動物とその生息地』のようにホグワーツ指定の教科書があります。Handbook』があります。上級といっても非常にシンプルにわかりやすく解説されているので、エンジニア1年生でも読み解くことはできるでしょう。Browerify自体もあまり日本語記事がなく、この時期だとWebpackの台頭でもうほとんど使っている人がいないかもしれませんが、Webpackのさらなる理解のためにも、今回書き起こしておこうと思いました。ドキュメントをしっかり読んでこそ理解できるのでHandbookなるものがあるのならばしっかり読み、基礎ができていないと怒られないようにします。gph.isそれでは解説を始めていこうと思います。アジェンダ今回の記事のアジェンダはこちらになります。Browserifyの基礎。TransformまとめBrowserifyまずはBrowserifyについて考えて行きましょう。dependencies.と公式ページにもあるように、依存関係をまとめてくれるもので、またブラウザ上でもrequireという書き方を可能にしてくれます。Node.jsで使っていたライブラリをフロントエンドでもrequireとして使うことができるようになるためサーバーサイドのNode.jsを開発しているときに使っていたnpmを同じような感覚で使うことができます。Browserifyの使い方このセクションは、あくまでも基本的な使い方、仕組みを解説しているだけです。以下のようにuniqライブラリを使ったmain.jsがあるとします。6];console.log(unique(data));uniqをインストールしなければならないので以下のようにインストールをします。uniqそして、あとは魔法を唱えるだけです。gph.is実際には以下のようにmain.jsと、その依存パッケージであるuniqをbundle.jsファイルをしてまとめます。bundle.jsとすることも可能です。src="bundle.js"></script>として書くことができてuniqについて心配する必要がありません。src="main.js"></script>と書かなければエラーとなったでしょう。そもそそブラウザではNode.jsで使うようなrequireは使うことはできないので、以下のようなエラーがでます。gamma(x);のようになっていたとしても、browserifyによってrequireを解析してくれ、まとめてくれます。軽くサンプルはわかったかなと思います。体系的に調査をしたいと思います。どのようにbundleされるのか例えば、以下のような依存関係のあるJavascriptファイルを作成してみましょう。ABという結果になります。図示すると以下のような関係になっています。さきほどの関数をexportしておきましょう。...}これを以下のように出力します。bundle.js図では、このようになったというイメージができます。これを<script>で入れてみて、ChromeのDevToolのSourceタブでみてみます。するとすると以下のようになっていました。b.sayYourName()}},{"./a":1,"./b":2}]},{},[3]);コンパクトに一つにまとめられているようです。他のBundleからファイルを参照する外部Requireバンドルするファイルでrequire()しているパッケージからもrequire()として公開することができます。前の例のa.js、b.js、それに依存するmain.jsを使用するとしましょう。ここで外部ライブラリchroma-jsを追加しました。b.sayYourName()}そして、今回はこのmain.jsでchroma-jsを使いたいだけでなくて、HTMLの別の<script>タグでも使用したいので、以下のように外部公開をします。bundle.jsそして、以下のようにインラインスクリプト内でrequire()しても使うことができます。</script></body>非常に簡単にNode.jsで使っていたライブラリを使うことができます。Bundleここまでは単一bundleファイルにまとめて利益を得ていました。AdminページとPublicページがあるときに、必要なJavascriptファイルは異なる可能性が高いです。それなのに、一つにまとめてしまうと、あらゆるところで必要のないファイルを読み込んでしまい、それがコストとなり、Webページの読み込みが遅くなる原因にもなります。必要なJavascriptファイルは必要なページで読み込むようにします。図の例だと、単一ファイルで依存関係が見えないのでメリットがわかりづらいですが、要点は捉えていると思います。あるファイルadmin.jsに以下のようなファイルがあります。require('./robot.js');console.log(robot('beep'));そしてpublic.jsに次のようにします。require('./robot.js');console.log(robot('public'));そして両方が依存しているrobot.jsは以下のようになっています。'!'};そして、以下のように実行します。src="beep.js"><script>して、もうひとつはboopを必要とするファイルを以下のようにして使うことができます。src="boop.js"><script>これは二つのステップで構成されています。Handbook』それでは本題のドキュメントを読んでいきます。gph.is実際のドキュメントは以下のURLです。github.comすべてのセクションは取り上げませんが、いくつか有用なものを解説していこうと思います。章わけをしていますが、雰囲気を出すためであり、ドキュメントはMarkdownで書かれています。Browserifyの基礎。worldと他の出力また、基礎の確認になります。library.jsに以下のようなファイルがあったとします。name;};そしてmain.jsを以下のようにします。Keke');すると以下のような出力があります。Kekeまた、関数だけでなくmodule.exportsで何もかも出力ができます。directly'とすることもできます。exportsでも渡すことはできますが、これはBrowerifyに限った話ではないので割愛させていただきます。Recompileコードの変更を監視して、自動的にbundleをし直してくれるパッケージがあります。beefyに機能は似ているが、より軽量なパッケージ他にもいくつかありますが、ここではこの3つだけの紹介にします。APIを使って、JavascriptからNode.jsで実行してしまうパターンです。browserify();b.add('./browser/main.js');b.bundle().pipe(process.stdout);GulpやGruntで使用することができます。transformを使って、いろんな非Javascriptファイルをbundleファイルの中に入れることができます。簡単なのがbrfsを使うことです。bundle.jsをすると、ファイルをそのまま取得することができます。"<p>Hello</p>"と同じになります。bundleファイル内で取得することができます。CSSも取り込むこともできますし、まだまだいろんな種類のファイルをbundleの中に取り込めます。Bundlingを完全にマスターするここではBundlingについて、もうすこしだけ詳しく書いていこうと思います。dedupeによって行うことができます。それかnode_modules/を一旦、削除して再度インストールするという手があります。Browserifyは同じファイルを二度使うことはありませんが、バージョンが別だとうまくはいきません。--depsを行って重複に対して調査をしてみてください。tinifytinifyプラグインを用いてさらに容量を抑えることができます。bundle.jstinifyとはBrowserifyのpluginで、いくつもの最適化をしてくれるものです。github.com詳しい内容は上記のリポジトリでご覧ください。chroma-jsと指定すると無視をすることができる。Exclude例えばすでに他のライブラリに取り込まれている時、別のbundleではrequire()ができないようにしたい時があるかもしれません。図示すると以下のような状況下のときです。main.jsでjQueryを使っていたとします。bundle.jsとすることによって重複を避けることができます。APIからはb.exclude('hoge')のように使用することができます。TransformJavascriptの仕様や、CoffeeScriptなどを変換してくれるものです。他にもCSS飲めた言語を変換してくれたり多機能です。変換できるものは、以下のリンクにありますが、膨大な数ほどあります。github.com例えば、ここでCoffeeScriptの簡単なスクリプトを書いてみましょう。Script")hello()そして以下のようにバンドルします。bundle.jsすると以下のように出力がされます。Script");};hello();},{}]},{},[1]);まとめ今回の記事でBrowserifyへの理解が深まり、より簡単にアプリケーションを効率よく使うことができそうです。次はWebpackについて記事をまとめたいと思います。ありがとうございました。私は以前、ポートフォリオサイトを作成しました。メモを整理していたときに、もっと簡潔に明文化したいと思...2018-12-23Concourseで継続的デリバリー。2018の第3日目の記事です。»プロフィール学生エンジニア。忘れてしまうので備忘録です。flaskでServerlessにホストするTelepresence概論スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。