Webpack4とBabel7を使用して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タグで次の調整を行います。
"scripts": { "start": "webpack --mode development", "dev": "webpack-dev-server --mode development --open", "build": "webpack --mode production" }
yarn run dev
を実行してコードをテストしてみましょう。
ブラウザに次のようなものが表示されます。
ステップ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リンクを確認してください。