eyecatch
Sun, Aug 19, 2018

React + Reduxアプリケーションプロジェクトのテンプレートを作る ― その1: Node.jsとYarnとBabelとwebpack

昔、Dojo Toolkitを使ってFlashなUIをJavaScriptに書き換えた時以来、仕事でWeb UIを触ることはなかったんだけど、最近になってWeb UIを書かなければいけなくなるような気がして再学習を始めた。 題材はReact (とRedux)。 今一番人気のフロントエンドフレームワークで、昔触ったこともあるので。 前回の記事でReactが生まれた経緯を学んだので、今回から実習に入る。 (adsbygoogle = window.adsbygoogle || []).push({}); プロジェクト作成 ちょっとCreate React Appを触ってみたけど使わないことにした。 すぐ開発始められるのはよかったんだけど、裏でなにが起こっているかわからな過ぎて肌に合わないし、使うライブラリが結構固定されちゃいそうだったし、トラブルシュート(特にライブラリのバグを踏んだ時)が大変そうだったので。 代わりに、公式で紹介されているブログ記事であるCreating a React App… From Scratch.を見ながら、スクラッチからプロジェクトを作ることにした。 環境はWindows 10 Home。 最終的な成果はGitHubに置いた。 Node.jsインストール なにはともあれNode.js。 Node.jsのバージョン管理には以前はnodist使っていたんだけど、こいつは2年ほど前に開発が止まっているので、代わりにnvm for Windowsを入れた。 nvm installで任意のバージョンのNode.jsをインストール出来て、nvm useで使うNode.jsのバージョンを切り替えられる。 今回使うNode.jsのバージョンは、現時点でLTS版の最新である8.11.4にする。 C:\>nvm install 8.11.4 Downloading node.js version 8.11.4 (64-bit)... Complete Creating C:\Users\kaitoy\AppData\Roaming\nvm\temp Downloading npm version 5.6.0... Complete Installing npm v5.6.0... Installation complete. If you want to use this version, type nvm use 8.11.4 C:\>nvm use 8.11.4 Now using node v8.11.4 (64-bit) Yarnインストール パッケージマネージャにはYarnを使う。 Yarnちょっとバギーだとか、npm 5がlockファイルをサポートしてYarnの優位性が減ったとか、Yarnからnpmに戻るためのツールが出てきたりしてるけど、現時点では深く考えずにYarnでいいと思う。 YarnはWindows環境ではMSIファイルをダウンロードして実行すればインストールできる。 (npmでもインストールできるけど邪道。) Yarnはv1.7.0を使う。 package.json生成 プロジェクトの構成情報を記述するファイルであるpackage.jsonをYarnで生成する。 C:\>mkdir react-redux-scaffold C:\>cd react-redux-scaffold C:\react-redux-scaffold>yarn init yarn init v1.7.0 question name (react-redux-scaffold): question version (1.0.0): question description: React Redux Scaffold question entry point (index.js): src/index.jsx question repository url: https://github.com/kaitoy/react-redux-scaffold.git question author: kaitoy question license (MIT): question private: success Saved package.json Done in 40.38s.