React, webpack, Babel7のセットアップ
React, webpack, Babelのセットアップの仕方の記事。この辺はバージョンの違いなどでやり方が異なったりしていて、何が正義なのかわからず混乱していたんですが、この記事はわかりやすかったです(英語だけど)。特にBabelが6=>7で大分セットアップの仕方が変わったようで、こちらは現時点で最新の7のやり方になります。
基本は記載のコマンドの通りやればokでした。モジュール周りの話でかいつまむと
- webpackはJS周りのコンパイルなど色々取りまとめてくれるツール
- ReactのコンポーネントはだいたいES6で書かれてる。ES6は便利な構文が揃う
- 現時点でES6非対応なブラウザがある。ES6=>ES5してくれるのがbabel-loader
- 変換には@babel/coreとさらにpresetが必要で、@babel/preset-envはES6=>ES5 (preset-es2015は現在非推奨)、@babel/preset-reactはJSXなど=>JS、と変換する
- html-loader、html-webpack-pluginを使うとtemplateとなるhtmlファイルにJSを含めずに済み、必要なhtmlをloader経由で出力してくれる
- webpack-dev-serverはファイルの変更保存時にブラウザを自動更新してくれるので、開発時に使うと便利
など。モジュールの役割の理解が曖昧で何を使うべきか迷っていたので、そのあたりの説明があったのがありがたかったです。
