はじめに
今まではReactで学習をする時に「create-react-app」コマンドを使用してプロジェクトを作成し、学習していましたが、
・バックエンドも使用したプロジェクトの際はバックエンドを起動→フロントエンドを起動してたが、面倒臭い
・そもそもcreate-react-appが何をしているか分からない
というのもあって調べたところ、「webpack、Babel」の設定をすると色々捗るし勉強にもなると思い、学習を始めました。
今回は、webpack、Babelのことを全く知らなかった私が、設定の際にハマった点を紹介したいと思います。
なお、今回はwebpack、Babelを用いた詳細な環境構築は割愛させていただきます。
実行環境
OS・・・Linux ubuntu20.04
webpack・・・4.44.2
webpack-cli・・・4.0.0
webpack-dev-server・・・3.11.0
設定の際にハマった点
１・Babel６と７以降ではインストールするパッケージ名が違う場合がある
まずこの点にハマりました。
Babel7以降はパッケージ名の前に「＠」が付くのと(scoped packagesと呼ぶようです)、 「babel-preset-es2015」のようにパッケージの中身が現在は非推奨とされたものもありました。
以下は私が遭遇したパッケージの変更の一例です。
| Babel6まで | Babel7以降 |
|---|---|
| babel-cli | @babel/cli |
| babel-core | @babel/core |
| babel-loader | @babel/loader |
| babel-preset-env | @babel/preset-env |
| babel-preset-es2015 | 現在は非推奨 |
| babel-preset-stage-〇〇 | 現在は非推奨 |
パッケージの名前も異なるため、.babelrcに記述するパッケージ名も異なります。
{
//Babel6
"presets": ["env", "react", "es2015", "stage-0"]
//Babel7以降
"presets": ["@babel/preset-env","@babel/preset-react"]
}
導入しようとしているパッケージがBabel7以降のバージョンだとどういう名前になっているのか、または使う必要があるのか、一度公式ドキュメントで確認してみることをオススメします。
Babel公式ドキュメント
２・webpack-cliが４以降だとwebpack-dev-serverの起動コマンドが違う
「webpack-dev-server」はwebpackを使用した開発時に利用できる開発用のWebサーバーで、特に難しい設定もなくサクッと開発用サーバーが立ち上げられるのが魅力的です。
//webpack-dev-serverの導入
//npm
npm install --save-dev webpack-dev-server
//yarn
yarn add --dev webpack-dev-server
インストールが完了したので、package.jsonにスクリプトを記述して、実行！！！
//package.json
"scripts": {
"dev": "webpack-dev-server --config ./config/webpack.config.js"
}
//実行！！
yarn run dev
--中略--
internal/modules/cjs/loader.js:968
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /home/user/work/webpack/react-webpack-fastify/node_modules/webpack-dev-server/bin/webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
at Function.Module._load (internal/modules/cjs/loader.js:841:27)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (/home/user/work/webpack/react-webpack-fastify/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
・・・エラーが発生しました。。。
とりあえず何が原因か分からないのでエラー名をコピペして検索すると、どうもwebpack-cli４以降は「webpack-dev-server」コマンドが使えなくなり、4以降は「webpack serve」コマンドにする必要があるようでした。
参考サイト↓
Error: Cannot find module 'webpack-cli/bin/config-yargs'
もう一度package.jsonの設定をやり直し、実行！！！
//package.jsonの設定をやり直し
"scripts": {
"dev": "webpack serve --config ./config/webpack.config.js"
}
//もう一度実行！！
yarn run dev
--中略--
ℹ ｢wdm｣: Compiled successfully.
今度は成功しました。
まとめ、教訓
今回の環境構築は日本語の技術記事サイト、ブログを参考にして構築しました。
そういったサイトは英語で記述された公式ドキュメントよりもわかりやすいのでついつい参考にしがちですが、 当然のことながら情報が古い場合があるのでそこを加味して参考にするのと、英語を読むのが面倒くさいからとドキュメントを見ずに日本語サイトを参考にしてハマるより、多少時間がかかってもいいから最新の情報が書かれた公式ドキュメントを参考にしたほうが、結果時間がかからずに済むのではという結論に至りました。
これからは公式ドキュメントを読むクセをつけるとともに、自分が記事を書く時も、情報が古くなっていないか適宜確認してアップデートをしていこうと思います。