vite4加react18加ts-安装篇

vite4加react18加ts-安装篇； 最近从vue3转型学习了，react相关技术架构，去有意识的去学习了相关东西，内容比较实用，没有引入太多原理和概念，就是最直接最实用的记录下来；

安装React脚手架

npm create vite@latest
// 输入自己的文件名称
?Project name: >>vite-project
// 选择React
?Select a framework: >> - Use arrow-keys. Return to submit.
  Vanilla
  Vue
> React
// 选择TypeScript
?Select a variant: >> - Use arrow-keys. Return to submit.
  JavaScript
> TypeScript
  JavaScript + SWC
  TypeScript + SWC

配置环境变量

// 新建.env.prod
VITE_APP_TITLE='production'
// 命令行界面package.json
"scripts": {
	"build": "vite build --mode prod"
}
// 代码中获取
const Env = import.meta.env.VITE_APP_TITLE;

配置alias别名-vite.config.js

resolve: {
  alias: {
  '@': path.resolve(__dirname, 'src')
  },
  extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
},

配置alias别名-tsconfig.json

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

Antdesign安装 按需引入 less

npm install antd --save
// 按需引入
npm install less less-loader consola vite-plugin-style-import -D

Antdesign 配置vite.config.js

import { createStyleImportPlugin, AntdResolve } from 'vite-plugin-style-import'
plugins:[
 react()
 createStyleImportPlugin({
    resolves: [AntdResolve()]
 })
],
css: {
    preprocessorOptions: {
      less: {
        modifyVars: { // 更改主题在这里
          'primary-color': '#52c41a',
          'link-color': '#1DA57A',
          'border-radius-base': '2px'
        },
        charset: false,
        // 配置全局less
        additionalData: `@import '/src/assets/style/global.less';`,
        javascriptEnabled: true
      }
    }
}

Antdesign 按需使用

import { Button } from 'antd'
function Home () {
  return (
    <Button>Hi antd</Button>
  )
}

React函数组件中初始化会调用两次

// 关闭严格模式 main.tsx
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  // <React.StrictMode>
    <App />
  // </React.StrictMode>,
)

最终项目依赖

{
  "name": "road_network_core",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@reduxjs/toolkit": "^1.9.1",
    "antd": "^5.1.2",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-activation": "^0.12.2",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.6.1"
  },
  "devDependencies": {
    "@types/node": "^18.11.18",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@vitejs/plugin-react": "^3.0.0",
    "consola": "^2.15.3",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.0.0",
    "vite-plugin-resolve-externals": "^0.2.2",
    "vite-plugin-style-import": "^2.0.0"
  }
}