More than 3 years have passed since last update.

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

Posted at 2020-12-13

webpack

機能
- ファイルを1つにまとめる
メリット
- モジュール化
  - jsファイルは他のファイルを参照できないが、開発する時はモジュールに分割して開発したい
- ブラウザによってES6のimportやexportが搭載されていないものがあるが、webpackを使用することで共通でデプロイができる
Webpackの入門書

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

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