小編精選 - 技術文章翻譯 · 07月09日

優化您的 React 應用程式：使用 Webpack、TypeScript、ESLint 和 Prettier 進行生產就緒設定的指南 - 2024

在這篇文章中，我們將介紹設定可部署的 React 應用程式所需了解的所有資訊。

GitHub 儲存庫：https://github.com/shivam-pawar/sample-react-app

先決條件

在開始之前，請確保您的電腦上安裝了 Node.js 和 npm（或yarn）。

初始化一個新專案

使用命令列並導航到專案的根資料夾並輸入

npm init

這將詢問您一些基本訊息，例如軟體包名稱、作者姓名、描述和許可證。有了這些訊息，它將建立一個名為package.json 的文件

安裝 React 和 TypeScript

安裝 React 和 ReactDOM 作為相依性：

npm install react react-dom

安裝 TypeScript 及其類型作為開發依賴項：

npm install --save-dev typescript @types/react @types/react-dom

設定 Webpack

安裝必要的 Webpack 相依性：

npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin webpack-merge ts-loader terser-webpack-plugin uglify-js

你的package.json看起來像這樣：

包.json

在根/專案層級建立一個webpack資料夾，並在其中新增這 3 個設定檔。

webpack.common.js
webpack.config.js
webpack.dev.js
webpack.prod.js

在根/專案層級建立一個src資料夾，並在其中新增這兩個檔案。

索引.tsx
索引.html

將以下程式碼複製並貼上到index.tsx中

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

const App = () => {
  return <div>Hello, React!</div>;
};

const rootElement = document.getElementById("root") as Element;
const root = createRoot(rootElement);

root.render(<App />);

將以下程式碼複製並貼上到index.html中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

現在讓我們更新 webpack 設定檔。

webpack.common.js

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

module.exports = {
  entry: path.resolve(__dirname, "..", "./src/index.tsx"),
  output: {
    path: path.resolve(__dirname, "..", "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "..", "./src/index.html"),
    }),
  ],
  devServer: {
    static: "./dist",
  },
};

webpack.config.js

const { merge } = require("webpack-merge");
const commonConfig = require("./webpack.common");

module.exports = (envVars) => {
  const { env } = envVars;
  const envConfig = require(`./webpack.${env}.js`);
  const config = merge(commonConfig, envConfig);
  return config;
};

webpack.dev.js

const webpack = require("webpack");

module.exports = {
  mode: "development",
  devtool: "cheap-module-source-map",
  devServer: {
    hot: true,
    open: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env.name": JSON.stringify("development"),
    }),
  ],
};

webpack.prod.js

const webpack = require("webpack");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  mode: "production",
  devtool: false,
  plugins: [
    new webpack.DefinePlugin({
      "process.env.name": JSON.stringify("production"),
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        minify: TerserPlugin.uglifyJsMinify,
        extractComments: true,
        parallel: true,
        test: /\.(ts|js)x?$/,
        terserOptions: {
          compress: {
            drop_console: true,
          },
          output: {
            comments: false,
          },
        },
      }),
    ],
  },
};

更新/替換package.json檔案中的腳本部分：

"scripts": {
    "start": "webpack serve --config webpack/webpack.config.js --env env=dev",
    "build": "webpack --config webpack/webpack.config.js --env env=prod"
  }

設定打字稿

在根/專案層級新增tsconfig.json檔案並將以下配置貼到其中。

{
  "compilerOptions": {
    "target": "ES6",                                  
    "lib": [
      "DOM",
      "ESNext"
    ],                                        
    "jsx": "react-jsx",                               
    "module": "ESNext",                               
    "moduleResolution": "Node",                     
    "types": ["react", "react-dom", "@types/react", "@types/react-dom"],                                      
    "resolveJsonModule": true,                       
    "isolatedModules": true,                          
    "esModuleInterop": true,                            
    "forceConsistentCasingInFileNames": true,            
    "strict": true,                                      
    "skipLibCheck": true                                
  }
}

現在您的專案資料夾和文件結構將如下所示：

專案結構

執行開發伺服器

在終端機/命令提示字元中執行以下命令來執行您的開發伺服器：

npm start

您的 React 應用程式現在應該在http://localhost:8080上執行。

設定 ESLint 和 Prettier

安裝 ESLint、Prettier 和必要的插件：

npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react

使用以下配置在專案的根目錄中建立.eslintrc.json檔案：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

使用以下配置在專案的根目錄中建立一個.prettierrc檔案：

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": false,
  "printWidth": 100,
  "tabWidth": 2
}

更新package.json檔案中的腳本部分：

"scripts": {
    "start": "webpack serve --config webpack/webpack.config.js --env env=dev",
    "build": "webpack --config webpack/webpack.config.js --env env=prod",
    "lint": "eslint . --ext .ts,.tsx --fix"
  }