babel と webpack について

Transcript

1. babel とwebpack について @yami_beta
2. 概要 babel と webpack についての解説をします フロントエンド開発の歴史から見る babel と webpack babel 解説 webpack 解説 まとめ
3. 注意 全体の概要を軽く把握出来るように崩した説明で記述しているため、 正 確性に欠ける内容になっている場合がありますのであらかじめご了承下 さい
4. フロントエンド開発の歴史から見る babel と webpack
5. babel とは 公式サイトには以下のように記載されています。 Babel is a JavaScript compiler. Use next generation JavaScript, today.
6. webpack とは 公式サイトの Core Concepts には以下のように記載されています。 webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles ‑ often only one ‑ to be loaded by the browser.
7. babel と webpack 何が違うの？ babel JavaScript のコンパイラ 次世代の JavaScript を今すぐ使う webpack JavaScript アプリケー ションのためのモジュー ルバンドラー
8. JavaScript の基礎1 コンソー ルには何が出力されるでしょう？ / / a . j s v a r f o o = ' b a r ' ; / / b . j s c o n s o l e . l o g ( f o o ) ; / / = > ' b a r ' が出力される < ! - - i n d e x . h t m l - - > < s c r i p t s r c = " a . j s " > < / s c r i p t > < s c r i p t s r c = " b . j s " > < / s c r i p t >
9. JavaScript の基礎2 JavaScript は関数スコー プ a . j s で定義した変数はグロー バルスコー プ 他のファイルから読み出せる
10. JavaScript の基礎3 ES5 時代では以下のような即時関数でスコー プを切る手段が用いられて いました。 ( f u n c t i o n ( ) { v a r f o o = ' b a r ' ; } ) ( ) ;
11. ES5 時代のフロントエンドの JavaScript 1 依存関係を示す方法が定義されていない r e q u i r e ( ) が出来ない a . j s で実装したモジュー ルを b . j s から利用する場合はグロー バル変数を経由 例: jQuery ( $ や j Q u e r y というグロー バル変数を定義) > w i n d o w . $ < ƒ ( s e l e c t o r , c o n t e x t ) { / / T h e j Q u e r y o b j e c t i s a c t u a l l y j u s t t h e i n i t / / N e e d i n i t i f j Q u e r y i s c a l l e d ( j u s t a l l o w e r r e t u r n n e w j Q u e r y . … > w i n d o w . j Q u e r y < ƒ ( s e l e c t o r , c o n t e x t ) { / / T h e j Q u e r y o b j e c t i s a c t u a l l y j u s t t h e i n i t / / N e e d i n i t i f j Q u e r y i s c a l l e d ( j u s t a l l o w e r r e t u r n n e w j Q u e r y . …
12. ES5 時代のフロントエンドの JavaScript 2 w i n d o w のプロパティで名前空間を切る 名前空間に各モジュー ルを代入することで 3rd party のライブ ラリとの衝突を避ける / / m e n u . j s ( f u n c t i o n ( w i n d o w , $ , u n d e f i n e d ) { / / 即時関数の引数で w i n d o w と j Q u e r y を渡すことで / / 即時関数内では w i n d o w と $ という変数が、 それぞれ w i n d o w と j Q u e r y / / w i n d o w に名前空間を切る w i n d o w . M Y _ A P P = w i n d o w . M Y _ A P P | | { } ; w i n d o w . M Y _ A P P . m e n u = f u n c t i o n ( ) { / / . . . } ; } ) ( w i n d o w , j Q u e r y ) ;
13. フロントエンド開発の歴史1 グロー バル変数で名前空間を切って参照していた時代から、 Node.js に よるソー スコー ド変換で r e q u i r e ( ) による依存関係の解決が可能に 時代 概要 ECMAScript 5 < s c r i p t > タグでファイルをそれぞれ読み込む or フ ァイル結合していた。 依存関係は力技で Node.js の 台頭 r e q u i r e ( ) によるファイル読み込みが可能に CommonJS の登場 JS をモジュー ルとして書く仕様 browserify の台頭 Node.js っぽく書いた JS をブラウザ用に変換してしま おう！ → r e q u i r e ( ) による依存関係の解決が可能に
14. フロントエンド開発の歴史2 browserify の衰退と webpack の台頭、ECMAScript 2015, babel の登 場 時代 概要 webpack の登場 browserify: JS のバンドル webpack: フロントエンド開発で用いるリソー スの大半を対象としてバンドル browserify の衰退と webpack の台頭 browserify の人気が低下し始め、webpack に 人が流れる ECMAScript 2015 (ES6) ES6 Module という仕様が固まり i m p o r t , e x p o r t が出来るようになる。 babel の登場 ES6 が動くブラウザが少ないため ES6 で書か れた JS を ES5 に変換してしまおう！
15. フロントエンド開発の歴史3 開発ツー ルの定着と変化 時代 概要 babel の 変化 ES6 → ES5 変換だけではなく、babel の plugin で便利な 機能を実装して変換してしまおう！ → 汎用的なコンパイ ラに webpack の進化 ブラウザをリロー ドせずにコンポー ネントを更新する Hot Module Replacement や未到達コー ドの削除等の開発用 の機能が増えた
16. 歴史から見る babel と webpack の違い before 人力 で依存関係を解決し、 ファイル結合していた after 依存関係を示せる i m p o r t , e x p o r t を用いるため babel に よるソー スコー ド変換 webpack による依存関係に基づくファイル結合 ツー ル 役割 babel ソー スコー ド変換（ 例: i m p o r t → r e q u i r e ( ) ） webpack ソー スコー ドの（ 依存関係解決を含めた） 結合
17. babel 解説
18. babel の中身 babel は JavaScript AST を操作することでソー スコー ド変換を行 っています。 babel の内部には babylon というパー サー がいて、 これが JavaScript を AST ( 抽象構文木) に変換しています。 つまり babel のプラグインは JavaScript AST を操作するモジュー ル で す。
19. babel を使うために babel を使ってコー ドを変換する場合、 どのような変換処理を行うか . b a b e l r c で指定します。 { " p r e s e t s " : [ [ " e n v " , { " t a r g e t s " : { " b r o w s e r s " : [ " l a s t 2 v e r s i o n s " ] } } ] , " r e a c t " ] , " p l u g i n s " : [ " t r a n s f o r m - r u n t i m e " ] }
20. preset と plugin babel には preset と plugin があり、 以下のような分類となっています preset plugin または preset の集合体 plugin babel で変換処理を行う実体 Transform Plugins 変換処理 Misc Plugins 便利機能追加 Syntax Plugins 新しい syntax のパー スを可能に
21. よく使うもの babel‑preset‑env 対象とする環境に合わせて必要な変換を行ってくれる便利な preset browserslist を内部で用いています babel‑preset‑react React の syntax のパー スと変換を行ってくれる preset
22. babel‑preset‑env これが登場する以前は babel‑preset‑es2015, babel‑preset‑ es2016, babel‑preset‑es2017 のように、 どの ECMAScript 仕様 まで対応するかによって preset を追加する必要がありました babel‑preset‑env をただ . b a b e l r c に指定しただけの場合 babel‑preset‑latest と同じ処理になります babel‑preset‑latest は ECMAScript の最新仕様まで対応する preset です { " t a r g e t s " : { " b r o w s e r s " : [ " l a s t 2 v e r s i o n s " ] } } のよう なオプションを渡すことで、 変換後の JavaScript を実行する環境に応じ て良い感じに変換するといった指定ができます
23. babel‑preset‑react React は本来 JavaScript として正しくない syntax で記述していま す < A p p / > は JavaScript として本来間違った記述であるが babel‑ preset‑react で処理することで、 パー スして babel で扱う AST に 変換し、 正しい JavaScript へ変換されて出力されます c l a s s A p p e x t e n d s R e a c t . C o m p o n e n t { r e n d e r ( ) { r e t u r n ( < h 1 > R e a c t C i r c u l a r L o a d i n g E x a m p l e < / h 1 > ) ; } } r e n d e r ( < A p p / > , d o c u m e n t . g e t E l e m e n t B y I d ( ' a p p ' ) ) ;
24. webpack 解説
25. webpack とは browserify と同様に JavaScript の依存関係を解決し結合するモジ ュー ルバンドラー フロントエンド開発のリソー スを JavaScript で扱うことが可能 html, css, 画像
26. html, css, 画像を Javascript で扱うとは？ 例えば、 以下のように css を import 可能にしてしまいます ES6 Module にこのような仕様は存在しないため webpack が提供 する独自機能です i m p o r t R e a c t f r o m ' r e a c t ' ; i m p o r t ' . / H e a d e r . c s s ' ; / / < - これのこと c o n s t H e a d e r = ( p r o p s ) = > { r e t u r n ( < h e a d e r > H e l l o W o r l d < / h e a d e r > ) ; } ; e x p o r t d e f a u l t H e a d e r ;
27. css を import するとどうなるの？ css ファイルの依存関係を解決し読み込みます css‑loader の機能 < s t y l e > タグを < h e a d > タグの子要素に追加する JavaScript が 生成されます style‑loader の機能
28. loader と plugin について webpack で処理を行うモジュー ルとして loader と plugin があります。 loader 最終出力を JavaScript で実行できる形にするモジュー ル input はなんでも良い（css, 画像 等） plugin loader 以外の処理 webpack で css を扱った上で外部ファイルに書き出す extract‑text‑webpack‑plugin は、 出力が JavaScript では無 いので plugin
29. よく使う loader と plugin babel‑loader uglifyjs‑webpack‑plugin webpack の本体にバンドルされている plugin は es5 のコー ド しか扱えないため、 別途インストー ルする必要がある（ いずれ は不要に） extract‑text‑webpack‑plugin
30. webpack を使う上での注意 html も css も画像も webpack で扱うと一本化されて便利ではあり ますが… webpack から抜け出せなくなるリスク を常に念頭に置きましょう
31. まとめ babel と webpack は異なる役割を持っています フロントエンド開発の技術構成は、 進化が早いです しかし、 一度追いつけば差分を覚えていくだけなので、 だいぶ 楽になります 特定のツー ルへの過度な依存は気をつけましょう 時代に取り残されます