Kanazawa.rb meetup #36で喋ったBrowserifyの紹介と今後もJavaScriptを利用するに当たって押さえておくべき課題のまとめ
BrowserifyでNode.jsとWebのいいとこどりJS開発〜 今、ちょい先、だいぶ先まで⾒すえて 〜@wtnabeKanazawa.rb meetup #362015-08-29 (Sat) at IT-Plaza MUSASHI
View Slide
お品書きそもそも Ecma262 は⼀⽅ Node.js はそこで Browserify ですよBrowserify の特徴から⾒える我々の課題
最初にまとめ
Browserifyにできることrequire をブラウザ上で動くように変換変換後は1つの JS ファイルに結合その他移植可能なモジュールの提供transform, plugin による拡張
Here, we go !!
そもそもEcma262は
依存コードを取得できないプラットフォーム独⽴⾔語⾃⾝にファイル読み込みがないFileSystemを持つJScriptですらwsfファイルでを使う<br/>
スコープはfunctionのみファイルを分割しても影響は全体にうっかり var を忘れると global leak
「テクニック」が横⾏利⽤機会が増えてお互いに影響が出るとまずい(function() {...})();※ testability が激しく落ちるデメリット
⼀⽅Node.jsは
責務の単位でファイル分割ファイル単位スコープ必要なものは requiremodule.exports公開するものを明⽰そのうえで名前空間不可侵
node_modules依存モジュールは閉じてる個々のモジュール内にnode_modules全体のコンフリクトが存在しない
スケールする依存管理※ 代わりに容量は膨らむ
安⼼して開発を進められる
そこでBrowserifyですよ
BrowserifyにできることNode.js の require がブラウザ上で動く変換後は1つの JS ファイルに結合その他移植可能なモジュールの提供transform, plugin による拡張
requireが動く依存ツリーを解決1つの JavaScript ファイルを出⼒ファイル単位のスコープ分割が⾃動的に⾏われる例のテクニック + α
何が嬉しいのか?スコープ管理⽤のテクニック不要豊富な npm module 群の⼀部を活⽤可能 を書き連ねる必要なし<br/>
そしてtransformの例coffeeify ( CoffeeScript )cssify ( CSS )babelify ( Babel : ES6 & JSX )espowerify ( power-assert )cf. list of transforms · substack/node-browserify Wiki
ローダーとの⽐較LABjsブラウザのみ対応、⾮同期読み込みRequireJSブラウザも node.js も対応しているが、それぞれ書き⽅が違う※ 要 LAB.js, require.js
Browserifyの特徴から⾒える我々の課題
その1 : npmJSer の知⾒は以前にも増して npm に集約されつつあるdownload して とかやらない<br/>package.json は多機能、タスクランナーと<br/>か⾔う前にマニュアル読め<br/>
その2 : transpilersource-to-source compilertranscompiler / transpilerJavaScript の変換は altJS に限らず常識にJSX とか変換⽅法はいくつかあるが、⾃分たちに合うものを⾒つけておく
その3: source map変換された JS と元のコードの対応付けBrowserify は debug オプションだけでdata uri の source map を⽣成してくれる
その4 : preprocesspreprocess で trans compile できるなら新しいチャレンジはやりやすいES6, JSX, ...preprocess の⾃動化で学習、業務効率に差がつく
Browserify以外ではView, DOMの新しい動きJSX系の記法、VirtualDOMフルスタックフレームワーク vs Tools※ ツールの話をしてるけどツールの話だけ追うのはよくない
その先の課題
EcmaScript 2015将来はこれHTML 5 に突っ込むよりは確実今から慣れるという意味では Babel 重要先んずれば⼈を制す
Enjoy !!
参考Browserifysubstack/browserify-handbookstudiomohawk/browserify-handbooklist of transforms · substack/node-browserifyWiki
参考Effective ES6ECMAScript 2015 Language Specification –ECMA-262 6th EditionBabel · The compiler for writing nextgeneration JavaScript