不使用 create-react-app 和 npm create，尝试搭建 vite + React + TypeScript 环境

2 年 ago

宇, 华

3 minutes

开发环境

不需要安装Node.js

項目バージョン備考OSUbuntu 20.04.6 LTSwindowsのwls2上で動かしてますnode18.18.0
vscode*なんでも

我不想使用create-react-app的原因。

babelとかもう使わない
ミニマムなコードを目指す

windowsだとセットアップが遅い

インストールも時間かかる
webpachも使いたくない

vite使いたい

依存関係がしゃらくさい

調査するたびストレスホッハ（ただの面倒くさがり）
自分で把握したいよね

暂且试试看

创建一个空项目。

mkdir react-typescript-base-project

项目初始化

请Yarn派的朋友们根据需要进行自由改写。

npm init

由於暫時如此，所以只需將全部空格按下Enter鍵重複即可。

安装React

我想要使用18.2版本来做这次的工作。

npm i react@18.2 react-dom@18.2

安装TypeScript

由于我并不特别在意，所以请安装最新版本。

npm i --save-dev typescript @types/node @types/react @types/react-dom

我們來看一下 package.json。

{
  "name": "react-typescript-base-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "18.2",
    "react-dom": "18.2"
  },
  "devDependencies": {
    "@types/node": "^20.8.2",
    "@types/react": "^18.2.25",
    "@types/react-dom": "^18.2.10",
    "typescript": "^5.2.2"
  }
}

挺好的

创建 tsconfig.json

请根据您的喜好进行设置更改。

{
  "compilerOptions": {
    "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",
    "noImplicitAny": false,
    "typeRoots": ["types", "node_modules/@types"],
    "noFallthroughCasesInSwitch": true,
    "strictPropertyInitialization": false,
    "target": "es5"
  },
  "include": ["src"]
}

代码格式化工具：引入 eslint 和 prettier

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

创建一个eslint的配置文件。

touch .eslintrc.json

请根据您的喜好进行设定更改。

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-empty-function": 0,
    "@typescript-eslint/no-empty-interface": 0,
    "react/prop-types": "off"
  }
}

创建prettier的配置文件

touch .prettierrc

请根据您的喜好进行设置。

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true
}

快速安装

npm i --save-dev vite @vitejs/plugin-react

创建 vite.config.ts 文件

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  server: {
    open: true,
  },
  plugins: [react()],
});

在package.json中添加命令

  "scripts": {
    "serve": "vite preview",
    "dev": "vite",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "lint": "eslint lint src",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

创建用于启动的HTML或TSX文件。

制作清单

./index.html

./公共/网站图标

不需要图标也没关系！

src/index.tsx的原始文件

只需要展示为“测试”。

import React from "react";
import ReactDOM from "react-dom/client";

const App = (): React.ReactNode => <div>test</div>;

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

主页.html

随便制作一些内容。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>react-typescript-base-project</title>
    <meta
      name="description"
      content="React × TypeScript × vite を利用したベースプロジェクトです"
    />

    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />

    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="react-typescript-base-project" />
    <meta property="og:title" content="react-typescript-base-project" />
    <meta
      property="og:description"
      content="React × TypeScript × vite を利用したベースプロジェクトです"
    />
    <meta property="og:image" content="%PUBLIC_URL%/logo.svg" />
  </head>
  <body>
    <noscript>
      <strong>javascriptを有効にしてください</strong>
    </noscript>
    <div id="root" />
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>

即刻启动！

npm run dev

非常完美嘛

最终的目录结构 de

只要符合以下的情况就可以了。

react-typescript-base-project
 ├─ node_modules
 │   └─ 各種ライブラリ（省略）
 │
 ├─ public
 │   └─ favicon.icon （任意）
 │
 ├─ src
 │   └─ index.tsx
 │
 ├─ .eslintrc.json
 ├─ .prettierrc
 ├─ index.html
 ├─ package-lock.json
 ├─ package.json
 ├─ tsconfig.json
 └─ vite.config.ts

最後

真的只需启动！其余就随意了。