记-vite2-react-初探This Vite原文链接参考文档老规矩脚手架根据提示操作 我这边选择的是 react-

This Vite

Vite 以 原生 ESM 方式服务源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。

原文链接

参考文档

老规矩脚手架

yarn create @vitejs/app

• 根据提示操作 我这边选择的是 react-ts 模板

支持的模板预设包括：

vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts

查看 @vitejs/create-app 获取每个模板的更多细节

• 完成这一步后会生成一个项目 yarn 装一下包

• yarn dev

• 这时候可以看到我们的 demo 已经跑起来了

配置文件

vite.config.ts

• 首先我们要配置下 less 安装一下 antd

yarn add antd

• 在app.tsx 中放一个 按钮看看效果

import { DatePicker } from ‘antd’;

自动导入组件库样式插件

• 安装 less

yarn add -D less

• 这时候是没有样式的，我们得和webpack 一样，引入一下~

• vite 更简洁一点只需要一个插件就搞定了

yarn add -D @vitejs/plugin-react-refresh

import reactRefresh from '@vitejs/plugin-react-refresh'

• vite.config.ts

plugins: [
    reactRefresh(),
    vitePluginImp({
      libList: [
        {
          libName: "antd",
          style: (name) => `antd/lib/${name}/style/index.less`,
        },
      ],
    })
  ],
  css: {
    preprocessorOptions: {
      less: {
        // 支持内联 JavaScript
        javascriptEnabled: true,
      }
    }
  },

alias 别名设置

import path from 'path

resolve: {
    alias: [
      {
        find: /^~/,
        replacement: path.resolve(__dirname, "src"),
      },
    ],
  },

ts alias 设置

配置 baseUrl & paths

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "~/*": ["src/*"]
    },
    
   ...
   
  },
  "include": ["./src"]
}

• 这时候页面上的按钮就有样式了

安装 react-router

接下来我们安装一下 react-router 和配置下 Layout，跑一个小小的 demo

yarn add react-router-dom

touch index.tsx

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import Layout from "./Layout/Layout";

import App from "~/views/App";
import Home from "~/views/Home";

interface Props {}

const Index: React.FC<Props> = () => {
  return (
    <Router>
      <Layout>
        <Switch>
          <Route path="/app">
            <App />
          </Route>
          <Route path="/home">
            <Home />
          </Route>
        </Switch>
      </Layout>
    </Router>
  );
};

export default Index;

touch Layout.tsx

import React from "react";
import { Menu } from "antd";
import { Link } from "react-router-dom";

interface Props {}

const Layout: React.FC<Props> = ({ children }) => {
  console.log();
  return (
    <div>
      <Menu mode="horizontal">
        <Menu.Item key="App">
          <Link to="/app">App</Link>
        </Menu.Item>
        <Menu.Item key="Home">
          <Link to="/home">Home</Link>
        </Menu.Item>
      </Menu>

      <div style={{ margin: "20px 0" }}>{children}</div>
    </div>
  );
};

export default Layout;

• 到这里 demo 就完成了

demo-源码