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

babel と webpack について

yami-beta
January 03, 2018

babel と webpack について

yami-beta

January 03, 2018
Tweet

Other Decks in Programming

Transcript

  1. 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.
  2. babel と webpack 何が違うの? babel JavaScript のコンパイラ 次世代の JavaScript を今すぐ使う

    webpack JavaScript アプリケー ションのためのモジュー ルバンドラー
  3. 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 >
  4. 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 . …
  5. 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 ) ;
  6. フロントエンド開発の歴史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 ( ) による依存関係の解決が可能に
  7. フロントエンド開発の歴史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 に変換してしまおう!
  8. フロントエンド開発の歴史3 開発ツー ルの定着と変化 時代 概要 babel の 変化 ES6 →

    ES5 変換だけではなく、babel の plugin で便利な 機能を実装して変換してしまおう! → 汎用的なコンパイ ラに webpack の進化 ブラウザをリロー ドせずにコンポー ネントを更新する Hot Module Replacement や未到達コー ドの削除等の開発用 の機能が増えた
  9. 歴史から見る 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 ソー スコー ドの( 依存関係解決を含めた) 結合
  10. babel の中身 babel は JavaScript AST を操作することでソー スコー ド変換を行 っています。

    babel の内部には babylon というパー サー がいて、 これが JavaScript を AST ( 抽象構文木) に変換しています。 つまり babel のプラグインは JavaScript AST を操作するモジュー ル で す。
  11. 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 " ] }
  12. preset と plugin babel には preset と plugin があり、 以下のような分類となっています

    preset plugin または preset の集合体 plugin babel で変換処理を行う実体 Transform Plugins 変換処理 Misc Plugins 便利機能追加 Syntax Plugins 新しい syntax のパー スを可能に
  13. 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 を実行する環境に応じ て良い感じに変換するといった指定ができます
  14. 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 ' ) ) ;
  15. 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 ;
  16. css を import するとどうなるの? css ファイルの依存関係を解決し読み込みます css‑loader の機能 < s

    t y l e > タグを < h e a d > タグの子要素に追加する JavaScript が 生成されます style‑loader の機能
  17. loader と plugin について webpack で処理を行うモジュー ルとして loader と plugin

    があります。 loader 最終出力を JavaScript で実行できる形にするモジュー ル input はなんでも良い(css, 画像 等) plugin loader 以外の処理 webpack で css を扱った上で外部ファイルに書き出す extract‑text‑webpack‑plugin は、 出力が JavaScript では無 いので plugin
  18. よく使う loader と plugin babel‑loader uglifyjs‑webpack‑plugin webpack の本体にバンドルされている plugin は

    es5 のコー ド しか扱えないため、 別途インストー ルする必要がある( いずれ は不要に) extract‑text‑webpack‑plugin