如何基于vite 创建项目

vite是现在比较流行的项目构建打包工具，相对webpack来说，尤其是在dev模式下，非常迅速（利用了esbuild）。

目前版本是2.9.5,相对2.9之前的版本来说变化较多，比如build后，vendor.js 不再打包为单独的js，如果想分离出vendor.js 需借助splitVendorChunkPlugin插件，使用方式如下:

import { splitVendorChunkPlugin } from 'vite'

plugins: [splitVendorChunkPlugin()]

创建vite项目方式如下：

• 方式1: 直接采用create-vite（直接执行create-vite 按照步骤,但是执行过程不一样）

• 方式2: 采取以下方式（以npm create vite为例）

具体创建步骤可以参考文档

github.com/vitejs/vite…

With NPM:

$ npm create vite@latest

With Yarn:

$ yarn create vite     //      yarn create @vitejs/app（过时写法）

With PNPM:

$ pnpm create vite

你也可以指定模版的形式创建项目，例如下面创建vite + vue的项目：

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

# npm 7+, extra double-dash is needed:
npm create 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