快速创建基于 Vite、React、TS 和 SWC 的项目模板指南

最编程 2024-07-31 21:34:00

...

前端 Vite 在打包速度上较大的提升，在这里分享一下如何使用 vite 构建一个项目模版

初始化项目

确认本机的 node、npm 版本

    "node": ">=16.14.0",
    "npm": ">=8.3.1"

确认 npm 7+ 以上，使用以下命令初始化项目

   npm create vite@latest vite-react-swc -- --template react-swc-ts

启动项目

    cd vite-react-swc
    npm install 
    npm run dev

此部分参考 Vite 官网

Vite 中文官网
Vite 官网

本地项目git初始化并提交远程仓库

在自己公司、个人使用的代码平台（如 github ）新增 react-swc-ts （对应自己项目名称）仓库，为了避免错误,不要初始化 README, 或者 .gitignore 文件
初始化本地仓库

    git init -b master .

添加文件到本地仓库、并提交

    git add .
    git commit -m "init"

添加远程仓库地址到本地仓库

    git remote add origin {远程仓库地址}

push到远程仓库

    git push -u origin master

先进行 git 初始化，才能进行后续的 `eslint` 、`husky` 配置

代码提交检测校验配置

    npm install --save-dev eslint lint-staged husky prettier

执行以下命令以后初始化 .eslintrc.cjs 文件。

    eslint --init

打开 .eslintrc.cjs 文件后会发现有飘红

解决方法：

安装 eslint 插件

   npm install --save-dev eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier

.eslintrc.js 文件最终配置为如下（只是示例，根据自身业务进行修改）

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
  ],
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["prettier", "react", "react-hooks", "@typescript-eslint"],
  /**
   * "off" 或 0 - 关闭规则
   * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出),
   * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
   */
  rules: {
    "no-cond-assign": 2,
    "no-console": [
      "warn",
      {
        allow: ["log", "warn", "error", "info"],
      },
    ],
    // 禁止 function 定义中出现重名参数
    "no-dupe-args": 2,
    // 禁止对象字面量中出现重复的 key
    "no-dupe-keys": 2,
    // 禁止重复的 case 标签
    "no-duplicate-case": 2,
    // 禁止空语句块
    "no-empty": 2,
    // 禁止对 catch 子句的参数重新赋值
    "no-ex-assign": 2,
    // 禁止不必要的布尔转换
    "no-extra-boolean-cast": 2,
    //强制使用一致的缩进 第二个参数为 "tab" 时，会使用tab，
    // if while function 后面的{必须与if在同一行，java风格。
    "brace-style": [
      2,
      "1tbs",
      {
        allowSingleLine: true,
      },
    ],
    // 控制逗号前后的空格
    "comma-spacing": [
      2,
      {
        before: false,
        after: true,
      },
    ],
    //在数组或迭代器中验证JSX具有key属性
    "react/jsx-key": 2,
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/no-this-in-sfc": 0,
    "react/prop-types": 0,
    "react/display-name": "off",
  },
};

新增 .eslintignore 文件，示例如下

*.sh
*.md
*.woff
*.ttf
.vscode
.idea
.husky
.local
dist
node_modules
Dockerfile
/public
/docs
/bin
build

配置 husky

修改 package.json 中 scripts 字段，增加以下两个命令

生成 .husky 文件夹

    npm run prepare

生成 pre-commit 文件

    npx husky add .husky/pre-commit

修改 pre-commit 文件

配置 package.json

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix"
    ]
  }

现在可以提交验证下校验是否生效

安装项目常用包

react-router-dom：路由配置(版本V6)
classnames lodash 常用包
less 文件名应为 *.module.less 才可正常使用

    npm install --save react-router-dom classnames lodash
    npm install --save-dev less

配置 Vite alias 别名导入

在 vite.config.ts 下增加以下配置

    resolve: {
        alias: {
          "@": path.resolve(__dirname, "./src"),
        },
    },

引入后会遇到报错提示

解决办法

    npm install @types/node --save-dev

tsconfig.json 也需要增加如下配置才能正常使用别名

    {
      "compilerOptions": {
        "paths": {
          "@/*": ["./src/*"],
        }
      }
    }

未完~~~

上一篇：阿里云服务器网络数据传输速率PPS详解：5万到100万包/秒的含义是什么?

下一篇： Webpack中的"打包包"（Bundle）、"模块"（Module）和"代码块"（Chunk）分别指什么？

快速创建基于 Vite、React、TS 和 SWC 的项目模板指南

此部分参考 Vite 官网

先进行 git 初始化，才能进行后续的 eslint 、husky 配置

快速创建基于 Vite、React、TS 和 SWC 的项目模板指南

先进行 git 初始化，才能进行后续的 `eslint` 、`husky` 配置