Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Browserify, beyond differences of node and web

088b1b43ff5dd64aa0f000da9e9da777?s=47 wtnabe
August 29, 2015

Browserify, beyond differences of node and web

Kanazawa.rb meetup #36で喋ったBrowserifyの紹介と今後もJavaScriptを利用するに当たって押さえておくべき課題のまとめ

088b1b43ff5dd64aa0f000da9e9da777?s=128

wtnabe

August 29, 2015
Tweet

Transcript

  1. BrowserifyでNode.jsとWebの いいとこどりJS開発 〜 今、ちょい先、だいぶ先まで⾒すえて 〜 @wtnabe Kanazawa.rb meetup #36 2015-08-29

    (Sat) at IT-Plaza MUSASHI
  2. お品書き そもそも Ecma262 は ⼀⽅ Node.js は そこで Browserify ですよ

    Browserify の特徴から⾒える我々の課題
  3. 最初にまとめ

  4. Browserifyにできること require をブラウザ上で動くように変換 変換後は1つの JS ファイルに結合 その他移植可能なモジュールの提供 transform, plugin による拡張

  5. Here, we go !!

  6. そもそもEcma262は

  7. 依存コードを取得できない プラットフォーム独⽴ ⾔語⾃⾝にファイル読み込みがない FileSystemを持つJScriptですらwsfファイ ルで<script>を使う

  8. スコープはfunctionのみ ファイルを分割しても影響は全体に うっかり var を忘れると global leak

  9. 「テクニック」が横⾏ 利⽤機会が増えてお互いに影響が出るとまずい (function() { ... })(); ※ testability が激しく落ちるデメリット

  10. ⼀⽅Node.jsは

  11. 責務の単位でファイル分割 ファイル単位スコープ 必要なものは require module.exports 公開するものを明⽰ そのうえで名前空間不可侵

  12. node_modules 依存モジュールは閉じてる 個々のモジュール内にnode_modules 全体のコンフリクトが存在しない

  13. スケールする依存管理 ※ 代わりに容量は膨らむ

  14. 安⼼して開発を進められる

  15. そこでBrowserifyですよ

  16. Browserifyにできること Node.js の require がブラウザ上で動く 変換後は1つの JS ファイルに結合 その他移植可能なモジュールの提供 transform,

    plugin による拡張
  17. requireが動く 依存ツリーを解決 1つの JavaScript ファイルを出⼒ ファイル単位のスコープ分割が⾃動的に ⾏われる 例のテクニック + α

  18. 何が嬉しいのか? スコープ管理⽤のテクニック不要 豊富な npm module 群の⼀部を活⽤可能 <script> を書き連ねる必要なし

  19. そしてtransformの例 coffeeify ( CoffeeScript ) cssify ( CSS ) babelify

    ( Babel : ES6 & JSX ) espowerify ( power-assert ) cf. list of transforms · substack/node-browserify Wiki
  20. ローダーとの⽐較 LABjs ブラウザのみ対応、⾮同期読み込み RequireJS ブラウザも node.js も対応している が、それぞれ書き⽅が違う ※ 要

    LAB.js, require.js
  21. Browserifyの特徴から ⾒える我々の課題

  22. その1 : npm JSer の知⾒は以前にも増して npm に集約 されつつある download して

    <script> とかやらない package.json は多機能、タスクランナーと か⾔う前にマニュアル読め
  23. その2 : transpiler source-to-source compiler transcompiler / transpiler JavaScript の変換は

    altJS に限らず常識に JSX とか 変換⽅法はいくつかあるが、⾃分たちに合うものを⾒つけておく
  24. その3: source map 変換された JS と元のコードの対応付け Browserify は debug オプションだけで

    data uri の source map を⽣成してくれる
  25. その4 : preprocess preprocess で trans compile できるなら新 しいチャレンジはやりやすい ES6,

    JSX, ... preprocess の⾃動化で学習、業務効率に 差がつく
  26. Browserify以外では View, DOMの新しい動き JSX系の記法、VirtualDOM フルスタックフレームワーク vs Tools ※ ツールの話をしてるけどツールの話だけ追うのはよくない

  27. その先の課題

  28. EcmaScript 2015 将来はこれ HTML 5 に突っ込むよりは確実 今から慣れるという意味では Babel 重要 先んずれば⼈を制す

  29. Enjoy !!

  30. 参考 Browserify substack/browserify-handbook studiomohawk/browserify-handbook list of transforms · substack/node-browserify Wiki

  31. 参考 Effective ES6 ECMAScript 2015 Language Specification – ECMA-262 6th

    Edition Babel · The compiler for writing next generation JavaScript