React創(chuàng)建配置項目的實現(xiàn)

更新時間：2025年06月05日 10:08:46 作者：shifff

本文主要介紹了React創(chuàng)建配置項目的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.初始化一個前端項目
2.添加TypeScript（可選/默認JS）
3.添加ESLint
4.添加Prettier
5.添加 EditorConfig 代碼風(fēng)格統(tǒng)一工具
6.stylelint樣式規(guī)范校驗工具
7.添加git hook（git提交前的強制校驗，不滿足條件不讓提交）
8.基本項目結(jié)構(gòu)
9.安裝react
10.添加react根組件
11.添加Babel
12.添加webpack

tips：所有配置文件均配置在項目的根目錄下

1.初始化一個前端項目

新建一個項目文件夾：npm init -y

初始化一個packahe.json

創(chuàng)建文件目錄如下

- src/
 -index.ts//項目入口文件
- package.json

2.添加TypeScript（可選/默認JS）

安裝TS，要先在全局安裝有yarn包管理工具，--dev命令將ts安裝為開發(fā)環(huán)境的依賴，不需要在生產(chǎn)環(huán)境中運行。

安裝ts

進行TS配置，在項目根目錄通過tsc --init命令創(chuàng)建tsconfig.json文件

ts初始配置文件

如果報錯：zsh: command not found: tsc。通常是因為 tsc 命令未被正確識別?？赡苁且驗?TypeScript 沒有全局安裝，或者你沒有正確配置路徑來運行 tsc。這里我們不需要全局安裝，所以我們直接配置路徑。
確認路徑設(shè)置（針對 zsh 用戶）
（可以通過 vi ~/.zshrc打開.zshrc文件，鍵盤敲I鍵進入編輯模式）
在 ~/.zshrc 文件中，添加以下行（如果未添加）：

export PATH="$PATH:./node_modules/.bin"

輸入:wq退出并保存文件，然后應(yīng)用更改

source ~/.zshrc

通過tsc --version查看版本，如果出現(xiàn)版本說明路徑設(shè)置成功
配置tsconfig.json文件

{
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "jsx": "react-jsx",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "paths": {
      "@/*": ["./src/*"]
    },
    "noEmit": true
  },
  "include": [
    "src/**/*",
    "typings/**/*",
    "config/**/*",
    ".eslintrc.js",
    ".stylelintrc.js",
    ".prettierrc.js"
  ],
  "exclude": ["node_modules", "build", "dist"]
}

3.添加ESLint

yarn add eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

配置.eslintrc.json文件

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "react-hooks"],
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/prop-types": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off"
  }
}

配置.eslintignore文件

# 忽略目錄
.DS_Store
node_modules
dist
build
public

4.添加Prettier

yarn add prettier  --dev

配置.prettierrc文件（不允許注釋）

{
    "printWidth": 100, 
    "semi": true, 
    "singleQuote": true, 
    "tabWidth": 2,
    "trailingComma": "all", 
    "bracketSpacing": true, 
    "jsxBracketSameLine": false, 
    "arrowParens": "always", 
    "requirePragma": false, 
    "proseWrap": "preserve" 
}

或者配置 .prettierrc.js文件（允許注釋）

module.exports={
  "printWidth": 100, // 換行字符串閾值
  "semi": true, // 句末加分號
  "singleQuote": true, // 用單引號
  "tabWidth": 2,
  "trailingComma": "all", // 最后一個對象元素加逗號
  "bracketSpacing": true, // 對象，數(shù)組加空格
  "jsxBracketSameLine": false, // jsx > 是否另起一行
  "arrowParens": "always", // (x) => {} 是否要有小括號
  "requirePragma": false, // 是否要注釋來決定是否格式化代碼
  "proseWrap": "preserve" // 是否要換行
}

配置.prettierignore文件

*.svg
package.json
.DS_Store
.eslintignore
*.png
*.toml
.editorconfig
.gitignore
.prettierignore
LICENSE
.eslintcache
*.lock
yarn-error.log
/build
/public

5.添加 EditorConfig 代碼風(fēng)格統(tǒng)一工具

在VSCode 中安裝 EditorConfig 插件
配置.editorconfig文件

# http://editorconfig.org
root = true

[*]
#縮進風(fēng)格：空格
indent_style = space
#縮進大小2
indent_size = 2
#換行符lf
end_of_line = lf
#字符集utf-8
charset = utf-8
#是否刪除行尾的空格
trim_trailing_whitespace = true
#是否在文件的最后插入一個空行
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

6.stylelint樣式規(guī)范校驗工具

VScode中安裝stylelint插件
安裝依賴

yarn add stylelint stylelint-config-standard --dev

配置.stylelintrc.js文件

module.exports = {
  extends: "stylelint-config-standard",
  rules: {
    // your rules
  },
  // 忽略其他文件，只校驗樣式相關(guān)的文件
  ignoreFiles: [
    "node_modules/**/*",
    "public/**/*",
    "dist/**/*",
    "**/*.js",
    "**/*.jsx",
    "**/*.tsx",
    "**/*.ts",
  ],
};

7.添加git hook（git提交前的強制校驗，不滿足條件不讓提交）

husky 是一個 gitHook 工具，可以配置 git 的一些鉤子，本文主要用來配置 commit 鉤子
lint-staged 是一個在 git 暫存文件上運行 lint 校驗的工具，配合 husky 配置 commit 鉤子，用于 git commit 前的強制校驗
安裝依賴(下面兩條命令二選一)

yarn add husky lint-staged --dev
npm install husky lint-staged --save-dev

8.基本項目結(jié)構(gòu)

在這里插入圖片描述

index.html內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react-app</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

9.安裝react

yarn add react react-dom
yarn add   @types/react @types/react-dom --dev

10.添加react根組件

在src下添加index.tsx文件，內(nèi)容如下

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

const App = () => {
  return (<h1>你好！</h1>);
};
// 這里用非空斷言說明root這個根結(jié)點是一定存在的
const root = createRoot(document.getElementById("root")!);
root.render(<App />);

11.添加Babel

需要使用 Babel 將 React 和 TypeScript 代碼轉(zhuǎn)換為 JavaScript。接下來我們安裝一些 Babel 工具

yarn add @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-transform-runtime @babel/runtime   --dev

配置 .babelrc文件

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

12.添加webpack

yarn add webpack webpack-cli @types/webpack --dev

yarn add webpack-dev-server @types/webpack-dev-server  --dev

yarn add babel-loader  --dev

yarn add html-webpack-plugin  --dev

開發(fā)環(huán)境文件config/webpack.dev.js

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

const config = {
  mode: "development",
  entry: {
    main: path.resolve(__dirname, "../src/index.tsx"),
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "../build"),
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/i,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-typescript",
            ],
            plugins: [
              [
                "@babel/plugin-transform-runtime",
                {
                  regenerator: true,
                },
              ],
            ],
          },
        },
      },
    ],
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "../src"),
    },
    extensions: [".tsx", ".ts", ".jsx", ".js"],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devtool: "inline-source-map",
  devServer: {
    static:{
      directory: '../build',
    },
    historyApiFallback: true,
    port: 4000,
    hot: true,
  },
};

module.exports = config;

到此這篇關(guān)于React創(chuàng)建配置項目的實現(xiàn)的文章就介紹到這了,更多相關(guān)React創(chuàng)建配置項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: