從零開始建立一個 React 開發環境

雖然流程上麻煩了點，但能幫助你理解背後的原理。

簡述

雖然要建立一個 React 環境可以用 create-react-app 來一鍵完成，但是我覺得還是要自己跑一次這背後的流程會更清楚一些。

簡單來說 React 的背後主要就是兩個東西：

1. webpack
2. babel

webpack 是用來處理 import 跟 require 的語法，而 babel 則是用來處理 ES 版本問題跟 React 內部的東西（JSX）。

webpack

首先安裝 webpack

npm install webpack webpack-cli

接著新增設定檔：

// webpack.config.js
const path = require("path");
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js"
  }
}

接著設定 package.json：

"scripts": {
  "start": "webpack --mode development", // 開發環境
  "build": "webpack --mode production",  // 生產環境
  "test": "echo \"Error: no test specified\" && exit 1"
}

最後確認打包出來的 bundle.js 是可以運作的就沒問題了。

babel

首先安裝該裝的東西：

npm install @babel/core babel-loader @babel/preset-env

建立 .babelrc：

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

去 webpack 設定 loader：

const path = require('path');
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        // 所有 .js 檔
        test: /\.js$/,
        // 排除 node_modules
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }

    ]
  }
}

這邊的結構有點巢，可以看成是 rules 有很多個所以是 Array，而每一個內容都是一包 Object，會指定要對哪些資源用哪些 loader。

把 React 串接起來

一樣先把該裝的東西裝起來：

npm install react react-dom @babel/preset-react

然後調整一下 .babelrc：

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

接下來建立一個簡單的 react component：

import React, { Component } from "react";

export default class App extends Component {
  render() {
    return <h1>Hello PeaNu</h1>
  }
}

然後到 index.js 引入：

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const root = createRoot(document.getElementById("root"))
root.render(<App />);

別忘了到 HTML 裡面加上 <div id="root"></div>。

接下來一樣打包後確認 React 是否能正常運作，

後續優化

1. 幫 bundle 加上 hash

如果檔案名稱都沒變的話，瀏覽器會有 cache 機制，導致可能不是用到最新的 bundle，所以就要到 webpack 調整一下設定，讓它自動幫我們加上 hash 值

output: {
  path: path.join(__dirname, "/dist"),
  filename: "bundle.[hash].js" // 加上 [hash]
},

但是除此之外，我們還得處理 HTML 引入 <script> 的問題，畢竟我們不可能每次都手動去改吧。

這邊要利用 webpack 提供的 plug-in，簡單來說就是幫你自動產生 HTML 檔。

一樣先安裝起來：

npm install html-webpack-plugin

然後設定 webpack.config.js：

const path = require('path');
// 引入套件
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.[hash].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }

    ]
  },
  // 新增要用的 plugin
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ]
}

附註：記得是傳入一個物件，不是直接傳路徑字串，提醒一下當初踩到的雷！

2. 加上 dev-server

因為每次改東西都要重新 build 實在太麻煩了，所以要用 dev-server 來達成 hot reload 的功能。

一樣把該裝的裝起來：

npm install webpack-dev-server

接著一樣改一下 package.json 的指令，只要一句話就好：

"scripts": {
  "start": "webpack-dev-server --mode development --open --hot"  
}

接著執行指令，沒意外的話能成功開啟 hot reload 的效果了。

以上就是基本的 React 環境建置，到這邊以後就可以正式進行開發了。