👀滴! 送你一个开箱即用的 React-admin 开启你的前端工程化之路 🤖

前语

跟着工作时长、前端常识的不断增加，我想总结一下自己到底会什么能做些什么。所以我想那就不如从零开始建立一个完整的项目工程吧，所以就有这些项目：react-admin-tp 模板项目 本项目也合适想要入门工程化建立的同学

模版项目概览

工程化方面

• webpack 从零开始装备项目打包
• eslint 代码检查
• husky lint-staged 代码提交检查
• evn 动态环境变量导入
• ts 运用ts编码
• less 大局变量注入

项目方面

• react-router-dom 菜单路由多级装备 动态菜单 懒加载
• axios 二次封装 简化参数方式
• mock 请求阻拦 模拟数据
• mobx context 根据mobx呼应式 编写大局状况 context分发部分状况
• antd 运用antd建立

工程化建立(根底)

说到工程化那必定便是 代码编译 代码检查 不同环境打包 CICD 这些啦

首先新建文件夹 初始化项目

 pnpm init
 pnpm i react react-dom core-js

webpack 根底版

装置 webpack 相关依靠

pnpm i webpack webpack-cli webpack-dev-server html-webpack-plugin mini-css-extract-plugin -D

装置react、ts、babel、css相关loader依靠

pnpm i @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/preset-typescript css-loader -D

创建 webpack.config.js

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const rootDir = __dirname;
const baseConfig = {
  // 入口文件
  entry: path.resolve(rootDir, "./src/main.tsx"),
  // 输出装备
  output: {
    clean: true,
    path: path.resolve(rootDir, "./dist"),
  },
  // sourcemap 调式源码映射
  devtool: false,
  // loader 规矩
  module: {
    rules: [
      // 处理 css 文件
      {
        test: /\.(c|le)ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      // 处理 jsx tsx ts 文件
      {
        test: /\.(t|j)sx?$/, // 比配到相应的文件及履行该 loader
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                targets: "> 0.25%, not dead",
                useBuiltIns: "usage",
                corejs: "3.30.2",
              },
            ],
            [
              "@babel/preset-react",
              {
                runtime: "automatic",
              },
            ],
            ["@babel/preset-typescript", { isTSX: true, allExtensions: true }],
          ],
        },
      },
      // 处理静态资源
      {
        test: /\.(jpe?g|png|svg|gif)/i,
        type: "asset",
      },
    ],
  },
  // 模块解析
  resolve: {
    alias: {
      "@src": path.resolve(rootDir, "./src"),
    },
    extensions: [".ts", ".jsx", ".tsx", "..."], // 自动不全文件后缀
  },
  plugins: [
    new webpack.ProgressPlugin(), // 编译进度
    new HtmlWebpackPlugin({
      title: "webpackApp",
      template: path.resolve(rootDir, "./public/index.html"),
    }), // 生成 indeX.html
    new MiniCssExtractPlugin(), // 抽离 css 文件
  ],
};
module.exports = (_, argv) => {
  console.log("MODE ===>", argv.mode);
  return baseConfig;
};

创建 ./src/main.tsx

import { createRoot } from "react-dom/client";
import styles from './main.module.css'
const dom = document.getElementById("root") as Element;
const root = createRoot(dom);
root.render(
  <div className={styles.container} >
    webpack test_demo
  </div>
);

此刻的目录结构是这样的

在 package.json scripts 参加

“build”: “webpack -c webpack.config.js –mode=development”

pnpm build

此刻应该就能够看到打包输出的产品啦 dist 文件夹内。
以上便是webpack打包react、typescript的根底装备啦！

以上需要留意的便是运用到了 babel 的几个预设 (详细的运用能够看看官网)
core-js 是用来补全浏览器还未支撑的特性用的 不运用stage提案或非远古浏览器不用也可

dev-serve

实在开发过程中咱们必定需要一遍开发一遍查看作用，所以还需要参加 dev-server。
将 webpack.config.js 中的导出部分修改为

module.exports = (_, argv) => {
  console.log("MODE ===>", argv.mode);
  if (argv.mode === "development") {
    // mode=development 时增加 devServer 相关装备
    const devServer = {
      historyApiFallback: true,
      open: true,
      port: 8888,
    };
    baseConfig.devServer = devServer;
    baseConfig.plugins.push(new webpack.SourceMapDevToolPlugin({})); // 增加 SourceMapD 此插件可替代 devtool
  }
  return baseConfig;
};

在 package.json scripts 参加

“start”: “webpack serve -c webpack.config.js –mode=development”
运转 pnpm start 即可开到开发页面啦

到这儿 webapack 相关的根底装备就完毕了。

Eslint Ts format

开发和打包弄好了，该优化一下咱们的开发体会啦，方才的编码过程中Vscode会一向提示的ts、eslint相关的过错一片红这个严重影响咱们的开发体会，现在咱们来处理他们。

首先装置下依靠

pnpm i eslint eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks -D

装置 ts 相关依靠

pnpm i typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

装置 react 类型声明

pnpm i @types/react @types/react-dom

增加 .eslintrc.js

module.exports = {
  // 以此文件为准 不往上查找 eslint 装备文件
  root: true,
  parser: "@typescript-eslint/parser",
  // 环境
  env: {
    browser: true,
    es2021: true,
    commonjs: true,
  },
  globals: {
    process: "writable",
    __dirname: "readonly",
  },
  // 承继插件特性
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  // 解析选项
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 13,
    sourceType: "module",
  },
  // 共享装备
  settings: {},
  // 插件
  plugins: ["prettier", "react", "@typescript-eslint"],
  // 检查规矩
  rules: {
    "prettier/prettier": ["error"],
  },
  // 过滤文件
  ignorePatterns: ["dist", "node_modules", "pnpm-lock", "env"],
};

增加 tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"]
    }
  },
  "include": ["src", "./index.d.ts"]
}

增加 index.d.ts 样式文件静态资源类型声明

declare module "*.module.scss" {
  const classes: { [key: string]: string };
  export default classes;
}
declare module "*.module.less" {
  const classes: { [key: string]: string };
  export default classes;
}
declare module "*.module.css" {
  const classes: { [key: string]: string };
  export default classes;
}
declare module "*.jpg" {
  const classes: string;
  export default classes;
}
declare module "*.png" {
  const classes: string;
  export default classes;
}
declare module "*.jpeg" {
  const classes: string;
  export default classes;
}
declare module "*.svg" {
  const classes: string;
  export default classes;
}
declare module "*.gif" {
  const classes: string;
  export default classes;
}

此刻当咱们写的代码不符合标准时就会有过错提示

留意：最好vscode装置 Eslint、Prettier 这样能够自动fix和format一些问题哦！
当咱们装备好后会发现 运用了 commonjs require 导入的文件会提示过错
在运用到 require 的文件顶部加上 /* eslint-disable @typescript-eslint/no-var-requires */ 就能够啦!

---

好啦，以上内容便是项目工程的根底内容啦！还有一些 husky lint-staged 动态导入环境变量撒的大家有情味能够看下我的react-admin-tp 模板项目哦~

另外我还写了个脚手架工具便利快速建立拉取项目 模版项目脚手架 大家能够试试哦

最后祝各位大佬牛气冲天