Vite

[WangShuXian6]

Vite

https://cn.vitejs.dev/ 前端开发与构建工具

[WangShuXian6]

初始化 Vite 项目

直接创建

使用 NPM:

$ npm init vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

指定项目名称和模板

https://github.com/vitejs/vite/tree/main/packages/create-vite

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

模版列表

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

[WangShuXian6]

vite issues

vite 支持optional Chaining（可选链判断运算符 ?.）和 nullishCoalescingOperator (空值合并运算符 ??)

安装依赖

yarn add @babel/plugin-proposal-optional-chaining --dev

yarn add  @babel/plugin-proposal-nullish-coalescing-operator -dev

vite.config.ts 添加配置

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import checker from "vite-plugin-checker";
import vitePluginImp from "vite-plugin-imp";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    plugins: [
      react({
        babel: {
          plugins: [
            "@babel/plugin-proposal-optional-chaining",
            "@babel/plugin-proposal-nullish-coalescing-operator",
          ],
        },
      }),
    ],
  };
});

vue 请使用 @vitejs/plugin-vue [未测试]