IT

webpackとBabelでReact開発環境を構築してみる

今回は、現在私が取り組んでいる課題で扱っているReactについてです。

create-react-app(CRA)は簡単にReactのプロジェクトができますが、無駄なファイルがあったり、環境構築については丸投げでブラックボックスになってしまう。。。

そこで、1から環境を構築してみます。(注 : Node.jsとnpmは使える前提で進めます)

前置き

React

Reactは、フロントエンド開発において世界中でもっとも利用されているJavaScriptライブラリです。

主な特徴は以下の3つ!(詳細は公式サイト参照)

  1. 宣言的なview
  2. コンポーネントベース
  3. 一度学習すれば、どこでも使える

webpack

webpackとは、複数のJavaScript(以下JS)ファイルを一つにまとめたJSファイルを生成してくれます。この、まとめる処理をバンドルと言います。

このバンドルされたJSファイルをHTMLに埋め込むと、Reactで記述したものが表示されます。

Babel

こちらは、JavaScriptのコンパイラです。基本的に、Reactには新しいバージョンのJSを記述します。しかし、全てのブラウザが新しいバージョンのJSに対応しているわけではありません。

そこで活躍するのがBabelです!新しいバージョンで書かれたJSを古いバージョンに変換してくれます。これによって、多くのブラウザでReactを動作させることができます。

 

環境構築

開発環境の確認

Node.jsとnpmは以下を想定しています。

  1. $ node -v
  2. v12.18.0

 

  1. $ npm -v
  2. 6.14.1

インストール

まずはディレクトリを作成して移動します。

  1. $ mkdir  react-webpack-babel && cd react-webpack-babel
  2. $ mkdir src dist

続いてpackage.jsonを作成します。-yをつけると、生成する際に聞かれる質問を飛ばすことができます。

  1. $ npm init -y

Reactのインストール

  1. $ npm i  react react-dom

Babelのインストール(–save-devについては「devdependencies dependencies」でググってみてください)

  1. $ npm i –save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
  • babel-loader : webpackでBabelを使うために必要
  • @babel/core : Babelのコア
  • @babel/preset-env : コンパイルするときにターゲットを指定するもの
  • @babel/preset-react : Reactをコンパイルするもの

webpackのインストール

  1. $ npm i –save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server
  • webpack : webpack本体です!
  • webpack-cil : webpackをコマンド操作するのに必要
  • html-webpack-plugin : webpackでHTMLを操作するのに必要
  • webpack-dev-server : ローカル環境で開発するためのサーバー。ソースコードを変更すると検知してブラウザをリロードしてくれる。

これで必要なものはインストールできました。これから設定していきます。

Babelの設定

プロジェクトのルートに「.babelrc」を作成し、以下のように記述します。

  1. [.babelrc]
  2. {
  3.   “presets”: [
  4.     “@babel/preset-env”, // 新しいバージョンのJS -> 古いバージョンのJS(es5)
  5.     “@babel/preset-react” // React用のプラグイン
  6.   ]
  7. }

webpackの設定

プロジェクトのルートに「webpack.config.js」を作成し、以下のように記述します。

  1. [webpack.config.js]
  2. const path = require(‘path’);
  3. //webpackでHTMLを扱うためのプラグイン
  4. const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
  5. module.exports = {
  6.   // bundleの開始位置
  7.   entry: ‘./src/Index.js’,
  8.   // bundleされたファイルの場所
  9.   output: {
  10.     filename: ‘main.js’,
  11.     path: path.resolve(__dirname, ‘dist/’),
  12.   },
  13.   module: {
  14.     // babelで[js, jsx]をコンパイル
  15.     rules: [
  16.       {
  17.         test: /\.(js|jsx)$/,
  18.         use: [‘babel-loader’],
  19.         exclude: /node_modules/,
  20.       },
  21.     ],
  22.   },
  23.   // [/src/index.html]を[dist/index.html]に生成
  24.   plugins: [
  25.     new HtmlWebpackPlugin({
  26.       template: ‘./src/index.html’,
  27.       filename: ‘index.html’,
  28.     }),
  29.   ],
  30.   // webpack-dev-serverの設定
  31.   devServer: {
  32.         contentBase: path.join(__dirname, ‘dist’),// ベースとなる参照するディレクトリ
  33.     port: 3000,
  34.     host: ‘localhost’,
  35.     open: true // サーバーを起動させたときにブラウザを開く
  36.     },
  37. };

React : コンポーネントの作成

「/src/Index.js」にコンポーネントを以下のように作成します。

  1. [/src/Index.js]
  2. import React from ‘react’;
  3. import ReactDOM from ‘react-dom’;
  4. const Index = () => {
  5.   return (
  6.     <h1>Hello React with webpack-Babel!!</h1>
  7.   );
  8. };
  9. ReactDOM.render(<Index />, document.getElementById(‘root’));

上記のJSファイルを埋め込むための「/src/index.html」を以下のように作成します。

  1. [/src/index.html]
  2. <!DOCTYPE html>
  3. <html lang=”jp”>
  4.   <head>
  5.     <meta charset=”UTF-8″ />
  6.     <title>Hello World</title>
  7.   </head>
  8.   <body>
  9.     <div id=”root”></div>
  10.   </body>
  11. </html>

これで、各ファイルの準備ができました。

しかし、開発サーバー(webpack-dev-server)の起動コマンドを設定していないため、「package.json」の”scripts”を以下のように変更します。

  1. [package.json]
  2. “scripts”: {
  3.   “start”: “webpack serve –mode development”,
  4.   “build”: “webpack –progress –mode production”
  5. },

これで、環境構築各ファイルの準備ができました!

開発サーバーの起動

早速、サーバーを起動してみましょう。以下のコマンドを実行して起動できます。

  1. $ npm start

「http://localhost:3000」にこんな感じで表示されます。

これで開発環境の構築が完了しました!

「/src/Index.js」を変更すると、自動でリロードされるので確認してみて下さい!

本番用にビルドする際は、

  1. $ npm run build

と打てば、「/dist」に「index.html」と「main.js」生成されます。

お問い合わせフォーム

気になる方はコチラからお問い合わせ!
必須お名前
必須メールアドレス
必須郵便番号
必須ご住所
必須電話番号
ご相談内容
必須メッセージ本文