在這篇文章中,我們將介紹設定可部署的 React 應用程式所需了解的所有資訊。
GitHub 儲存庫:https://github.com/shivam-pawar/sample-react-app
在開始之前,請確保您的電腦上安裝了 Node.js 和 npm(或yarn)。
使用命令列並導航到專案的根資料夾並輸入
npm init
這將詢問您一些基本訊息,例如軟體包名稱、作者姓名、描述和許可證。有了這些訊息,它將建立一個名為package.json 的文件
npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom
安裝必要的 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看起來像這樣:
webpack.common.js
webpack.config.js
webpack.dev.js
webpack.prod.js
索引.tsx
索引.html
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 />);
<!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 設定檔。
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",
},
};
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;
};
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"),
}),
],
};
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,
},
},
}),
],
},
};
"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上執行。
npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react
{
"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"
}
}
{
"semi": true,
"trailingComma": "all",
"singleQuote": false,
"printWidth": 100,
"tabWidth": 2
}
"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"
}
npm run lint
最終的package.json將如下所示:
您的最終資料夾結構將如下所示:
透過遵循本指南,您現在已經擁有了一個使用 Webpack、TypeScript、ESLint 和 Prettier 進行生產的 React 應用程式設定。此設定為建立具有最佳實踐的可擴展且可維護的 React 應用程式提供了堅實的基礎。
請記住使您的依賴項保持最新,並繼續學習這些工具以進一步優化您的開發工作流程。
快樂編碼!
如果您覺得這篇文章有用,請分享給您的朋友和同事!
閱讀更多關於 Dev.To ➡️ Shivam Pawar 的文章
關注我⤵️
🌐領英
原文出處:https://dev.to/shivampawar/optimizing-your-react-app-a-guide-to-production-ready-setup-with-webpack-typescript-eslint-and-prettier-2024-4lcl