JavaScript

Babel+WebpackでReact(TypeScript)の開発環境を構築しよう!

Babel+WebpackでReact(TypeScript)の開発環境を構築しよう!

「Reactでオレオレ開発環境を作りたい」
「create-react-appを使わずにイチから環境構築をしたい」
「BabelやWebpackの設定方法を知りたい」

Reactの開発環境構築ツールといえばCRA(create-react-app)が有名ですが、イチから環境構築したいという方もいますよね。

この記事では、BabelとWebpackでReactの開発環境を構築した方法を紹介していきます。

この記事で解説すること
  • Babelの設定方法
  • Webpackの設定方法
  • TypeScriptに対応する方法

Reactの環境構築に必要なBabelとWebpackとは

今回の環境構築では、BabelとWebpackというツールを使います。

両者ともに、現在のフロントエンド開発の環境構築のツールとして必修項目になりつつあります。

BabelはJavaScript用のコンパイラ

BabelはJavaScript用のコンパイラです

JavaScriptの標準は毎年バージョンアップされており、公開年に応じてECMAScript(以下、ES)2015といった名称で呼ばれます。

近年ですとES2015とそれ以前で、使えるメソッドや言語仕様が大きく変わりました。

しかし、ブラウザによっては最新のJavaScriptに対応していないのです。

開発者としてはES2015以降の記述をしたいものの、ブラウザの対応を気にする必要がありました。

そこで、Babelを使ってコンパイルすることで、例えばES2015で書いたJavaScriptを、それ以前の記述に変換することができます。

いわゆる、後方互換が可能ということですね。

Webpackはバンドラー

一方、Webpackはバンドラーと呼ばれます

バンドラーの役割は、複数のファイルを1つにまとめるというものです。

Webpackは、JavaScriptだけでなく、CSSや画像ファイルなどもまとめることができます。

複数のファイルがバンドルされることで、ファイルサイズが小さくなり、ページ表示の高速化につながります。

今回使うBabelとWebpackのバージョン

この記事では、Babel7とWebpack4のバージョンで実装しています。

また、前提としてNode.jsとnpmを入れておく必要があります。(この記事では導入方法は割愛します)

僕が設定した時のバージョンは以下です。

$ node -v
v12.16.1
$ npm -v
6.13.4

React環境構築①|Babelを設定しよう

まずはBabelをインストールしましょう。

$ npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

 

各パッケージの役割
  • @babel/core:Babel本体
  • @babel/preset-env:Babelの変換内容を設定するため
  • @babel/preset-react:BabelでReactのコードを変換するため
  • @babel/preset-typescript:BabelでTypeScriptのコードを変換するため

Babelをインストールしただけでは意味がないので、Babelの設定ファイルとなる.babelrcを作成しましょう。

$ touch .babelrc

 

.babelrcはJSON形式で記述できます。

presetsというkeyに対して、設定値を入れます。

.babelrc

{
  "presets": [
    "@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"
  ]
}

 

presetsは後ろから順に適用されます。

この記述形式であればTypeScript→React→JavaScriptの順に変換されます。

これでBabelの導入と設定は完了です。

React環境構築②|Webpackを設定しよう

次にWebpackの導入と設定をします。

まずはWebpackのパッケージ本体と、CLI用パッケージをインストールしましょう。

$ npm i -D webpack webpack-cli babel-loader ts-loader

 

Webpack関連パッケージの役割
  • webpack:Webpack本体
  • webpack-cli:WebpackをCLIで使うため
  • babel-loader:WebpackでBabelを使うため
  • ts-loader:WebpackでTypeScriptをバンドルするため

Babelと同様に、Webpack用の設定ファイルを作成します。

$ touch webpack.config.js

 

それではwebpack.config.jsを記述してみましょう!

webpack.config.js

module.exports = {
    // 本番にデプロイするときはモード値を production に設定
    // development に設定すると元のファイルとの関連性がわかるソースマップと一緒に出力される
    mode: 'development',

    // 環境によってはsrc/index.ts
    entry: 'src/index.tsx',

    module: {
        rules: [
            {
                test: /\.tsx$/,    // 環境によっては/\.ts$/
                use: 'ts-loader', // TypeScript用のloader
            },
        ],
    },
    resolve: {
        // React × TypeScriptで使う可能性のある拡張子を全て記述
        extensions: [
            '.ts', '.js', '.tsx', '.jsx'
        ],
    },
};

 

React環境構築③|TypeScriptとReactを入れよう

BabelとWebpackの設定が完了したので、TypeScritptとReactのパッケージを導入していきましょう。

$ npm i -S react react-dom
$ npm i -D typescript @types/react @types/react-dom

 

各パッケージの役割
  • react:React本体
  • react-dom:ReactでDOM操作するため
  • typescript:TypeScript本体
  • @types/~:TypeScript用の型定義ファイル

それでは、Reactのファイルを格納するsrcディレクトリと、エントリポイントになるindex.tsを作成しましょう。

$ mkdir src
$ touch src/index.ts

 

index.tsを編集していきます。

src/index.tsx

import React from 'react';
import { render } from 'react-dom'

render(
  <h1>React x TypeScript!</h1>,
  document.getElementById('root') 
)

 

ここまで来たらあと一歩!

次回の記事は実際にTypeScriptファイルをコンパイル&バンドルして、Reactアプリをローカル環境で実行してみます。

ABOUT ME
稲垣 貴映
サーバーエンジニア兼Webフロントエンジニア。 新卒で独立系SIerに入社後、金融系システム基盤の構築・運用を3年間経験。 プログラミングを独学していた頃に、CEOの馬谷が開講していたSwiftスクールに通い、2019年9月に入社。 趣味はブラジル音楽の演奏。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA