Webpack4とBabel7を使用してReactを設定する方法

投稿日: 2022-04-20 2022-04-20
タグ: Development, javascript, React

序章

Reactを学ぶ一般的な方法は、 create-react-app を使用することです。これは、Reactプロジェクトをブートストラップするための軽量な方法です。ただし、特定の目的を達成するために、アプリケーションを最初から構成する必要がある場合があります。このチュートリアルでは、WebpackとBabelを使用してReactをセットアップします。

ステップ1—プロジェクトの設定

始める前に、マシンにエディタとターミナルがインストールされていることを確認してください。さらに、npmを含むNode.jsのインストール済みバージョンが必要になります。読み続ける前に、すべてが設定されていることを確認してください。

コードを書き始める前に、プロジェクトを保持する新しいディレクトリを作成しましょう。コンピューターの任意の場所で、ターミナルで次のコマンドを実行します。

mkdir webpack-babel-react-starter
cd webpack-babel-react-starter

セットアップに不可欠ないくつかのパッケージをインストールするため、プロジェクトをpackage.jsonファイルで初期化する必要があります。次を実行します。

yarn init -y

注：このチュートリアルでは、パッケージマネージャーとしてyarnを使用します。 npmを使用している場合は、対応するコマンドを実行していることを確認してください。

ステップ2—Webpackを設定する

Webpackは、Web開発で最も人気のあるバンドラーの1つです。アプリケーションを処理するときに、依存関係グラフを内部的に作成します。このグラフは、プロジェクトに必要なすべてのモジュールをマップし、1つ以上のバンドルを生成します。バージョン4.0.0以降、webpackはプロジェクトをバンドルするための構成ファイルを必要としません。それでも、ニーズに合わせて構成できます。

次のコマンドを実行してインストールしましょう。

yarn add webpack --dev

また、webpackCLIをインストールする必要があります。

yarn add webpack-cli --dev

これら2つのパッケージをインストールすると、package.jsonファイルのnode_modulesセクションとdevDependenciesセクションがプロジェクトに新たに追加されます。

次に行うことは、インストールしたばかりのWebpackをpackage.jsonファイルに追加することです。

"scripts": {
  "build": "webpack --mode production"
}

この時点で、開始するための構成ファイルは必要ありません。

ステップ3—バベルを設定する

最新のJavaScriptはES6またはES7で記述されていますが、すべてのブラウザーがこれを理解しているわけではありません。ここでは、重い照明を行うためにバベルが必要です。 Babelは、現在および古いブラウザまたは環境でECMAScript2015+コードを下位互換性のあるバージョンのJavaScriptに変換するために主に使用されるツールチェーンです。 Babel docs をチェックして、彼らがあなたのために何ができるかについての詳細を確認してください。

Reactコンポーネントは、ほとんどがES6で記述されており、インポート、クラス、およびその他のES6 +機能の概念がありますが、古いブラウザーでは理解できません。 Webpack自体は、ES6コードをES5コードに変換またはトランスパイルする方法を知りません。しかし、ローダーの概念があります。webpackローダーは入力のようなものを受け取り、出力として別のものを生成します。

セットアップには、babel-loaderを使用します。これは、ES6コードをトランスパイルするWebpackローダーです。 babel-loaderの使用を開始する前に、いくつかのパッケージをインストールし、変換先の特定のJavaScriptバージョンを対象とするbabelプリセットenvを設定する必要があります。

すべての依存関係をインストールしましょう：

yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader --dev

また、Babel構成ファイルを設定し、ルートディレクトリに.babelrcという名前の新しいファイルを作成して、次の構成を書き込む必要があります。

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

この構成により、BabelがReactコード（JSXおよびES5コードに必要なその他のES6 +コード）を確実にトランスパイルします。

ルートディレクトリにwebpack.config.jsファイルを作成し、次の構成を記述します。

module.exports = {
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
}

.jsまたは.jsx拡張子を持つすべてのファイル（node_modulesフォルダーとそのコンテンツを除く）について、Webpackはbabel-loaderを使用してES6コードをES5にトランスパイルします。

これが完了したら、Reactコンポーネントの作成に進みましょう。

ステップ4—Reactを設定する

テキストとボタンをレンダリングするReactコンポーネントを作成しますが、Reactを利用するには、reactとreact-domの依存関係をインストールする必要があります。

yarn add react react-dom

それらをインストールした後、ルートディレクトリに新しいフォルダを作成します。それをsrcと呼び、その中にindex.jsファイルを作成します。

index.jsファイルに、次のコードを記述します。

import React from "react";
import ReactDOM from "react-dom";

const Index = () => {
  return (
    <div className="full-screen">
      <div>
        <h1>
          React Page {" "}
        </h1>
        <br />
        <a
          className="button-line"
          href="https://github.com/deityhub"
          target="_blank"
        >
          Know more
        </a>
      </div>
    </div>
  );
};

export default Index;

物事をテストする時が来ました。ターミナルをもう一度開いて、次のコマンドを実行します。

yarn run build

Webpackによって作成されたdistフォルダーが表示され、その中にindex.jsファイルがあり、その中にES5コードの縮小バージョンがあります。 package.jsonのビルドスクリプトでは、webpackコマンドの後に--mode productionフラグを指定しました。これにより、WebpackはES5コードの縮小バージョンを生成します。トランスパイルされたコードの読み取り可能な形式を確認するには、--mode productionを--mode developmentと交換できます。

出力は、コードが機能することを示していますが、トランスパイルされたコードをブラウザーに表示する必要があります。これを行うには、Webpackで動作するようにHTMLとCSS（SCSS）を設定しましょう。

ステップ5—ReactコンポーネントをDOMに接続する

ReactコンポーネントをDOMでレンダリングできるように、HTMLファイルを設定する必要があります。これを実現するには、パッケージhtml-webpack-pluginをインストールする必要があります。

yarn add html-webpack-plugin --dev

webpack.config.jsファイルを次のように調整します。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    })
  ]
};

入力と出力を調整しているので、ファイルの名前とターゲットをもう少し制御できます。

次は、srcフォルダー内にHTMLファイルを作成します。それをindex.htmlと呼び、次のコードを追加します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>React, Webpack, Babel Starter Pack</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <!-- your react app will render here -->
    <div id="app"></div>
  </body>
</html>

srcディレクトリにいるので、Reactコンポーネントにいくつかの調整を加えましょう。まず、新しいフォルダcomponentsを作成し、このフォルダ内に2つのファイルapp.jsとapp.scssを追加します。コードに次の調整を加えます。

./src/index.jsの場合：

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/app";

ReactDOM.render(<App />, document.getElementById("app"));

./src/components/app.jsで

import React from "react";
import "./app.scss";

const App = () => {
  return (
    <div className="full-screen">
      <div>
        <h1>
          React Page {" "}
        </h1>
        <br />
        <a
          className="button-line"
          href="https://github.com/deityhub"
          target="_blank"
        >
          Know more now
        </a>
      </div>
    </div>
  );
};

export default App;

./src/components/app.scssの場合：

body {
  background: linear-gradient(253deg, #0cc898, #1797d2, #864fe1);
  background-size: 300% 300%;
  -webkit-animation: Background 25s ease infinite;
  -moz-animation: Background 25s ease infinite;
  animation: Background 25s ease infinite;
}

.full-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
//you need to setup file-loader in webpack before you can use images
  background: url("../../assests/image/background.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  //_ works with row or column_

  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

h1 {
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 4em;
  letter-spacing: -2px;
  text-align: center;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.6);

  &:after {
    display: block;
    color: #fff;
    letter-spacing: 1px;
    font-family: "Poiret One", sans-serif;
    content: "React project powered by webpack and babel with support for sass";
    font-size: 0.4em;
    text-align: center;
  }
}

.button-line {
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  font-size: 1.4em;
  opacity: 0.8;
  padding: 20px 40px;
  text-decoration: none;
  transition: all 0.5s ease;
  margin: 0 auto;
  display: block;

  &:hover {
    opacity: 1;
    background-color: #fff;
    color: grey;
  }
}

@-webkit-keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

DOMでレンダリングするHTMLおよびReactコンポーネントに加えて、いくつかのスタイルを追加します。コードを実行してテストする前に、Webpackを構成して、通過する.cssまたは.scssファイルの処理方法を認識できるようにする必要があります。

yarn add css-loader sass-loader mini-css-extract-plugin node-sass --dev

ここにインストールされているsass-loaderは、Webpackが.scssをブラウザが理解できる.cssファイルに変換するために使用され、内部ではnode-sassを使用します。これを達成するために。次に、mini-css-extract-pluginは、Webpackが提供する通常の動作（CSSファイルを最終的な.js出力ファイルにバンドルする）ではなく、すべてのCSSファイルを単一のCSSファイルに抽象化します。コードを実行すると、レンダリングされたHTML出力にCSSが組み込まれます。

Webpack構成ファイルを開き、コードを次のように調整します。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.(css|scss)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

注： Webpackはローダーを右から左に処理するため、Webpack構成ファイル内のローダーの順序は重要です。たとえば、CSSファイルのテストを使用すると、最初にsass-loader、次にcss-loader、最後にMiniCssExtractPluginが実行されます。

それでは、webpack開発サーバーをインストールしましょう。これにより、開発サーバーが作成され、開発中の変更がないかファイルが監視されます。

yarn add webpack-dev-server --dev

次に、package.jsonファイルを開き、スクリプトタグで次の調整を行います。

"scripts": {
    "start": "webpack --mode development",
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  }

yarn run devを実行してコードをテストしてみましょう。

Testing the code with

ブラウザに次のようなものが表示されます。

React project in the browser

ステップ6—機能の拡張

それでは、このプロジェクトにさらに2つの機能を追加して、これよりも高度なReactプロジェクトで作業するときに機能を拡張または追加できることを示しましょう。

ターミナルを開き、次のパッケージをインストールします。

yarn add file-loader @babel/plugin-proposal-class-properties --dev

file-loaderは、画像またはSVGをインポートするすべてのシナリオを処理し、 @babel /plugin-proposal-class-propertiesはReactクラスを処理しますコンポーネントと静的クラスのプロパティ。

webpack.config.jsで、次のように調整します。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.(css|scss)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      },
      {
        test: /.(jpg|jpeg|png|gif|mp3|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[path][name]-[hash:8].[ext]"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

.babelrcファイルで、次のように調整します。

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

最後に、yarn run devを実行して、すべてが適切に機能していることを確認します。

結論

これをReactアプリのベースとして使用すると、構成を拡張して、そこから何かを構築できます。行き詰まった場合は、完全なコードへのGitHubリンクを確認してください。

getdocs

13036