【備忘録】React環境構築まとめ

備忘録

メモ

Node.jsの環境

  • nvmでのnodeバージョン切り替え
  • yarn.lockではpackage自体の依存の管理
  • 開発するときのみ必要なライブラリは -D で
  • global installしたときのみ yarn なしでinstall可
  • .binについて

Babelでのトランスパイル

  • Babel : ブラウザがサポートするJavaScriptに変換できる
  • @babel/cli: コマンドで。babel.config.jsを作成
  • pluginをセットにしたpresetを利用

TypeScriptでのコンパイル

  • tsconfig,jsonに記述
  • module -- common.js
  • lib -- コンパイルに含めるライブラリのファイル一覧を指定、targetなどに依存

webpackでのバンドルとビルド

  • webpack: 単体で実行可能なファイルを生成するファイルを生成するもの
  • webpack.config.jsに記述
  • loader -- bundle前にソースコードになんらかの処理を行う(Babel, tscでコンパイル)
  • html-webpack-pluginでhtmlファイルの変換

ESLint

Prettier

所感

友達に「CRAだとejectが〜」と言われたので、気になってCRAを使わずに環境構築する方法を学んでみました。（個人的にはCRAでもそんなに困ってなかった）（細かい違いのわかる女になりたい） 結果的に、Babel, Webpackの理解が深まって良かったと思います。webpackすごい。縁の下の力持ち。

今までCRAでしれっと開発してきましたが、フロントエンドの依存沼を垣間見ました。。。 また、index.htmlファイルの作成し忘れで1日溶けたのもいい思い出ということにしておきます。脳死でCRAよくない。