用Vite快速创建React×TypeScript环境的最简版本

2 年 ago

宇, 华

2 minutes

使用Vite来创建React×TypeScript环境。

有很多种打包工具，但基于esbuild的vite打包速度快，而且可以进行类似webpack的详细配置，因此最近经常使用。
此外，在开发构建期间，由于具备HMR功能，当源代码发生变化时，它会自动在浏览器中进行更新，使开发非常舒适。

选择以下的vite命令交互方式即可为您创建模板，这种方式非常直接。

$ npm create vite@latest
// yarnの場合は
$ yarn create vite@latest

因为仅仅这样说还有点无趣，我会简单解释一下。

样本
github

由于示例目录结构较简单，已做出如下更改。

.
├── README.md
├── package.json
├── src
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
├── vite.config.ts
└── yarn.lock

package.json的内容如下所示。
您可以使用npm dev进行开发构建，使用npm build进行生产构建。

{
  "name": "vite-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20.6.0",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

Vite的build配置需要在vite.config.ts文件中进行编写。
需要进行@vitejs/plugin-react-swc插件的配置设置。
在build属性中写入详细的配置。
示例中编写了针对生产构建的配置。

import { resolve } from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

// https://vitejs.dev/config/
export default defineConfig({
  root: 'src',
  plugins: [react()],
  build: {
    // distフォルダに出力
    outDir: resolve(__dirname, 'dist'),
    // 存在しないときはフォルダを作成する
    emptyOutDir: true,
    rollupOptions: {
      // entry pointがあるindex.htmlのパス
      input: {
        '': resolve(__dirname, 'src/index.html'),
      },
      // bundle.jsを差し替えする
      output: {
        entryFileNames: `assets/[name]/bundle.js`,
      },
    },
  },
});

在src/index.html中有一个html代码段，用于嵌入React应用程序。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>タイトル</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="module" src="/main.tsx"></script>
  </head>
<body>
  <div id="root" />
</body>
</html>

在 main.tsx 文件中，编写了 React 的初始化处理代码。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';

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

只需要提供一个选择：
src/vite-env.d.ts用于定义环境变量的类型。
由于vite内置了dotenv库，可定义环境变量，
通过在此文件中添加环境变量类型定义，可以在引用处使用环境变量的类型。

TypeScript 提供了自动补全功能。

/// <reference types="vite/client" />

// 以下にReactで参照する環境変数の型定義を書く

ESLint和Prettier的引入

我们将引入语法检查和代码格式化器。
在这方面有很多不同的做法，
因此在选择哪个软件包以及eslint和prettier规则方面也存在个人偏好，
这仅供参考。

  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "eslint": "^8.45.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "prettier": "^3.0.0",
  }

在ESLint中，语法检查规则可以在.eslintrc.cjs文件中进行定义。

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['react-refresh', '@typescript-eslint/eslint-plugin'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',
  ],
  env: {
    node: true,
    jest: true,
    browser: true, 
    es2020: true,
  },
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

创建.prettierrc文件来配置语法格式化规则。

{
  "tabWidth": 2,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "all"
}

只需用以下命令生成的dist文件夹，然后进行托管即可显示本次正式构建。

$ npm build
もしくはyarnの場合は
$ yarn build

引入CSS库

可以直接在行内编写CSS，而且Vite本身也支持CSS模块。

Themeで一括にアプリ全体のCSSを適用したい

因为经常发生这种事情

我们会使用vanilla-extract，它是一个轻量级、最小化且具备上述功能的类型安全工具，非常方便开发。详见https://vanilla-extract.style/。

将包导入自身非常简单。只需在package.json中添加包并进行安装。

  "dependencies": {
    "@vanilla-extract/css": "^1.13.0",
  }
  "devDependencies": {
    "@vanilla-extract/vite-plugin": "^3.9.0",
  }

在vite.config.ts中添加插件

import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), vanillaExtractPlugin()],