公司的可视化项目使用的技术栈是react+three.js+mobx+webpack4，因为项目原来的负责人离职了，代码没有上ts，也没有任何备注，项目整体显得比较乱，逻辑也不清晰，索性用上ts，并顺带着把项目迁移到vite2。

创建新的react+ts+vite的项目

创建项目，选择react+ts版本，然后进入项目，安装相应的依赖

pnpm create vite

配置eslint+prettier，可以根据自己的需求，下面是我使用到的

pnpm i eslint prettier eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-simple-import-sort

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

.eslintrc.js文件，我配置的比较简单，大家可以根据自己的需求定制

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  env: {
    browser: true,
    amd: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['simple-import-sort', 'prettier'],
  rules: {
    'prettier/prettier': ['error', {}, { usePrettierrc: true }],
    'react/react-in-jsx-scope': 'off',
    'jsx-a11y/accessible-emoji': 'off',
    'react/prop-types': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    'simple-import-sort/imports': 'error',
    'simple-import-sort/exports': 'error',
    'jsx-a11y/anchor-is-valid': [
      'error',
      {
        components: ['Link'],
        specialLink: ['hrefLeft', 'hrefRight'],
        aspects: ['invalidHref', 'preferButton'],
      },
    ],
  },
};

.prettierrc.js文件，这里我配置的也是比较简单

module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 90,
  tabWidth: 2,
  jsxBracketSameLine: true,
  endOfLine: 'auto',
};

.vite.config.js的配置，别名配置和静态目录更改，这里有些人可能会报错找不到path模块，记得pnpm i @types/node --save-dev

import reactRefresh from '@vitejs/plugin-react-refresh';
import path from 'path';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: {
      '@': path.join(__dirname, './src'),
      components: path.join(__dirname, './src/components'),
      utils: path.join(__dirname, './src/utils'),
      store: path.join(__dirname, './src/store'),
      styles: path.join(__dirname, './src/styles'),
      assets: path.join(__dirname, './assets'),
    },
  },
  publicDir: 'assets',
});

别名配置好了，但是vscode并不会自动跳转到响应文件，这里就需要在tsconfig.json里配置一下路径了

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "utils/*": ["src/utils/*"],
      "store/*": ["src/store/*"],
      "components/*": ["src/components/*"],
      "styles/*": ["src/styles"],
      "assets/*": ["assets"]
    },
  },
}

Mobx

之前的项目是使用的mobx5，响应式api是@observable，这种装饰类的写法在ts中会报错，所以直接升级到mobx6，官方给了一个插件能自动从5的语法升级到6的语法

pnpm i mobx-undecorate
npx mobx-undecorate

静态文件的处理

因为项目中使用到了three.js，需要处理相应的webwork,建模相关的.obj,.mtl等静态文件

webwork

import Worker from './shader.js?worker'
// 内联为 base64 字符串
import InlineWorker from './shader.js?worker&inline'
const worker = new Worker()
const inlineWorker = new InlineWorker()

静态文件的引入

import busObj from 'public/models/bus/bus.obj?url';
import busObj from 'public/models/bus/bus.obj?url';

从文件系统导入多个模块

const modules = import.meta.glob('/models/bus/bus.mtl') //懒加载的，动态导入
const modules = import.meta.globEager('/models/bus/bus.mtl') //直接引入所有的模块

其他注意事项

1.存在jsx/tsx的文件，需要把文件后缀名改为jsx/tsx，如果继续使用js/ts引入会报错

2.vite新建的react-ts项目，引入js文件会报错，需要在tsconfig.json里设置允许js文件

{
  "compilerOptions": {
    "allowJs": true,
  },
}

3.打包的时候，有些第三方库ts检测会报错，需要在tsconfig.json里设置让ts跳过对第三方库的检测

{
  "compilerOptions": {
    "skipLibCheck": true
  },
}

4.lodash可以使用lodash-es，具备 ES6 模块化的版本

结语

vite的功能还有很多，以上是我自己迁移项目用到的一些点，希望对大家有所帮助