【ミライトデザイン社内勉強会#9】フロントの環境構築（webpackとBabel）の基本を知りたい

webpack

webpackとBabelの基本を理解する(1) ―webpack編― - Qiita

• 機能
  • ファイルを1つにまとめる

• メリット

  • モジュール化
    • jsファイルは他のファイルを参照できないが、開発する時はモジュールに分割して開発したい
  • ブラウザによってES6のimportやexportが搭載されていないものがあるが、webpackを使用することで共通でデプロイができる

• Webpackの入門書

Babel

webpackとBabelの基本を理解する(2) ―Babel編― - Qiita

• jsの構文を変換してくれるコンパイラ。
  • es2018→es2015に変換したり
  • react や ts で書いたものをjsのソースに直してくれたり
  • constをvarに変更したりとか
• 構文を変更することによって古いブラウザにも対応できる
  • あんまり古いブラウザに対応しすぎると、変換後のコード量が増えて重くなったりするかも

• 変換後の構文はおそらくes2015だけど、設定によって変換できる

• Presets

  • https://qiita.com/koedamon/items/92c986456e4b9e845acd#presets
  • 変換のルール集みたいなもの
  • これを設定していないと変換してくれない
    • TSを使用するなら（@babel/preset-typescript）が必要。みたいな。

• 設定ファイルは.babelrc以外にpackage.jsonに書くことも可能

  • どっちにもある場合はどっちが優先されるんだろう？
    • おそらく.babelrc
  • あんまりpackage.jsonまとめるメリットはないかも？

• 設定方法はいろいろあるけど、基本は構文を変換してくれるってだけ。

webpackとBabelの基本を理解する(3) ―webpackとBabel編― - Qiita

• webpackのLoader
  • webpackでjs以外のアセットをバンドルする場合はLoaderを使用する
    • cssや画像ファイルをimportできるようになる
• babel-loader
  • webpackとbabelでは噛み合わないため、その間にloaderを挟んでいる

webpackとBabelの基本を理解する(4) ―React編― - Qiita

• Reactはコンポーネント分割をするため、WebpackやBabelが必須となっている
• ESモジュールって何？
  • ECMAScriptモジュール · JavaScript Primer #jsprimer
  • import exportでモジュール化するための仕組み
• create-react-app
  • 自前でwebpackとBabelの設定をすることってある？
    • まれにカスタマイズすることはある

webpackとBabelの基本を理解する(5) ―Sass編― - Qiita

• Sass（Syntactically Awesome StyleSheet）
  • CSSをいい感じに描けるようにしたもの
  • CSSにコンパイルする必要がある
  • SASSとSCSSという2つの記法がある
    • SASS: インデントを使う
    • SCSS: { }を使う
• WebpackでSassやCSSをバンドルできる