使用 Vite 构建 React 项目

Vite 出来已经有很长一段时间了，用过的人都对他颇为好评，之前一直怕有坑没去尝试，用法上和 Webpack 是一样的。不同的是 Vite 开发环境下使用 esbuild，他不会对整个项目打包，使得他的项目运行速度非常快，开发体验也就比 Webpack 要好。

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

选项就是选react，react-ts

npm create vite@latest my-vite-app
cd my-vite-app
npm install
npm run dev

很快啊，这脚手架生成的项目比cra内容少一些，react 版本为 18.0.0

"dependencies": {    
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
 }

设置一下 src 别名 alias

修改vite.coinfig.ts

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

同时，修改tsconfig.json，让IDE可以识别这个别名，加入paths

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

注意哈，这个 react 18 有一个变化，app的挂载方式变了

main.tsx

import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import {BrowserRouter} from "react-router-dom"

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

对比一下旧写法

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

在 App.tsx 中引入路由，同时移除掉不需要的内容

import Home from '@/container/home/Index'
import About from '@/container/about/Index'

function App() {
  return (
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
        </Routes>
      </div>
  )
}

刷新一下页面，测试一下/about跳转

这样项目就完美运行了，路由也正常运行了

顺便装上了心爱的 mobx， 不知不觉已经发展到了 6.5.0。

npm i mobx -S

当我安装上 mobx-react 时候，他终于报错了。原因是该依赖暂时还没更新，react18与他所需依赖冲突了。

$ npm i mobx-react -S
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vite-project@0.0.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   mobx-react@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\dell\AppData\Local\npm-cache\eresolve-report.txt for a full report.

但是据我了解，16 17 18基本没什么变化，暂时先强制安装吧

npm i mobx-react -S --force

接下来就创建 store 文件

src/store/home/index.ts

import {action, makeAutoObservable} from "mobx"

class Store {
  count = 0

  constructor() {
    makeAutoObservable(this, {
      increase: action,
    })
  }

  increase() {
    this.count++
  }
}

export default Store

修改 Home.tsx，新增HomeChild组件测试子组件

import React, {Component} from 'react'
import Store from "@/store/home"
import HomeChild from "@/container/home/HomeChild"
import {observer, Provider} from "mobx-react"

interface IProps {
}

class Home extends Component<IProps> {
  store = new Store()

  addCount = () => {
    this.store.increase()
  }

  render() {
    return (
      <Provider store={this.store}>
        <div>
          <p>This is Home Page.</p>

          count: {this.store.count}
          <button onClick={this.addCount}>点击加1</button>
          {/* @ts-ignore store 已通过 inject 方法注入 */}
          <HomeChild/>
        </div>
      </Provider>
    )
  }
}

export default observer(Home)

添加 HomeChild.tsx 子组件

import React, {Component} from 'react'
import Store from '@/store/home'
import {inject, observer} from "mobx-react"

interface IProps {
  store: Store;
}

class HomeChild extends Component<IProps> {
  render() {
    return (
      <div>
        <p>This is Home Child</p>

        count in Home Child: {this.props.store.count}
      </div>
    )
  }
}

export default inject('store')(observer(HomeChild))

点击按钮，同时触发了页面及其子组件的更新，说明 mobx 和 mobx-react 都正常工作了。

至此，一个 Vite + TypeScript + React + React-Router + Mobx 的项目就基本搭好了，更具体的配置需要分别去设置。

完整项目代码： github.com/OlyLis1005/…

附加资料：

Vite: vitejs.dev/

React: react.docschina.org/docs/gettin…

TypeScript：www.tslang.cn/docs/handbo…

React-Router: reacttraining.com/react-route…

Mobx: mobx.js.org/README.html