『ネコミミでもわかるフロントエンド環境構築』を読む
https://gyazo.com/17b8f0adb1eba49da14e1592c968bec3
タイトル
ネコミミでもわかるフロントエンド環境構築
著者
年
2018
リソース
写経用リポジトリ
実行環境
node v10.5.0
yarn 1.7.0
読む前の注意
頭から写経していくことが想定されているのでリポジトリは最終的な完成物がおいてあるので、コピペすると序盤はビルドが通りません
Babelの流れが早いので、deprecatedなものがあるかもしれない。インストールに関して詰まったら最新のドキュメントを眺めるのが鉄則
本の内容
第一章 まずは準備から
第二章 JavaScriptを動かす
解説していること
IE10以降なら基本的に動くES5をサポートすることを目指す Babelに取り込まれたようなので今やるなら yarn add --dev @babel/preset-env
ブラウザの指定が柔軟にできる。例えば
現行ブラウザのn世代前までサポート
Safariの7以降をサポート
If you want to specify target browsers, we recommend using a .browserslistrc config, which is also used by many tools including Autoprefixer.
もし本書の方法と違って@babel/preset-envを入れた場合インストールコマンドはつぎのようにしないとバージョン違いでビルドできません
yarn add --dev "babel-loader@^8.0.0-beta" @babel/core webpack
本書のとおりに進めるのがよさそう(自分は最新の@babel/preset-envを使った)kadoyau.icon
Webpackはv.3からconfigが不要でCLIからビルドなどできるようになったが、CSSを変換などしようとすると辛いので設定ファイルをつくる
kadoyau.icon
enforce.preの優先度をつけたいものが複数あったときに、その実行順序はどうなる?
useを使ってarrayをつっこめばよい(後ろから適用される)
yarn build:devでHello, Wolrdをビルドできるようになった
ブラウザで動作確認する
ホットリロード(再起動なしにモジュールを追加/削除する)を有効にするためにHMRプラグインを設定する 第三章 JavaScriptのためのパワフルなツール
BabelでトランスパイルをしているとESLintのパーサで対応できないことがあるのでBabel用のESLintのパーサをつかう
You only need to use babel-eslint if you are using types (Flow) or experimental features not supported in ESLint itself yet.
JSXやCSSにも対応しているコードフォーマッタ
eslint --fixを使わないのはCSSとかもコードフォーマットをかけたいから?kadoyau.icon
--writeはeslint --fixと同じようなもの
型チェックツール
本が書かれたあと?に変わっているらしく本家のdocだとインストールコマンドはkadoyau.icon
yarn add --dev @babel/preset-flow
除外対象等の設定を書く
JS側にも設定が必要
第4章 Reactをはじめる
本が書かれたあと?に変わっているらしく本家のdocだとインストールコマンドはkadoyau.icon
yarn add --save @babel/preset-react
serveでビルドしようとするとエラー
code:zsh
ERROR in ./src/js/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/kadoyau/dev/necomimi-frontend-wakaru/node_modules/babel-preset-flow/lib/index.js
babel-preset-frowだけ@babel/preset-flowを利用しておらず旧バージョンを利用していたので差し替えたら動いた。本書の通りにすすめていればおきないはずkadoyau.icon Reactコンポーネントを書く
HTMLのidにHeadingをアタッチする
https://gyazo.com/7292c98f899813a9716d1d4af1d7fa0a
第5章 爆速でテストを書く
書籍の通りにやっていないと、yarn jestでコケる
code:zsh
Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.
yarn add --dev babel-jest 'babel-core@^7.0.0-0' @babel/core regenerator-runtimeをしたら通るようになった
default importと named import
Reactコンポーネントのテストを書く
問題:大量のDOMがあったらDOMごとにassertionを書くことになってしまう
対応:スナップショットを使って前回実行時との差分をテストする
yarn jest初回実行時にスナップショットが生成される。そのDOMと比較するテストを書く
このDOMが想定通り生成されていないと誤ったテストになるので、スナップショット自体の正しさの確認はしないとだめkadoyau.icon
もとのDOM生成を変更したらどうするの?
yarn jest -uでスナップショットをアップデートできる
kadoyau.iconがはまったこと
code:zsh
$ echo {js,jsx}
js jsx
$ echo {js, jsx}
zsh: parse error near `}'
code:bash
bash-3.2$ echo {js,jsx}
js jsx
bash-3.2$ echo {js, jsx}
{js, jsx}
空白を開けてはだめ🙅