Vite

为什么选Vite?

预构建依赖快、按需加载、热更新快

依赖：vite使用esbuild预构建依赖，esbuild使用Go编写（编译型语言）,并且比以Javascript编写（解释型语言）的打包预购建快10-100倍 代码：按需加载

一个开发服务器 + 一套构建指令

开发服务器：基于原神ES模块提供丰富的内建功能：比如热模块更新HMR（Hot Module Replacement） 构建指令：使用Rollup,并且是预配置

安装

npm install -g pnpm

npm create vite@latest
yarn create vite
pnpm create vite
插件集
pnpm i less less-loader -D
pnpm i sass sass-loader -D
要想为传统浏览器提供支持，可以按下面这样使用官方插件 [@vitejs/plugin-legacy]
pnpm i @vitejs/plugin-legacy -D

vite.config.js 配置

• 社区插件 github.com/vitejs/awes…
• Vite Rollup插件（Vite已兼容的Rollup插件）vite-rollup-plugins.patak.dev/
• npm Vite 插件搜索链接来找到一些遵循了 [推荐约定] 的 Vite 插件www.npmjs.com/search?q=vi…
• 通过 npm Rollup 插件搜索链接获取 Rollup 插件www.npmjs.com/search?q=ro…
• 多页面应用配置 cn.vitejs.dev/guide/build…
• 使用插件配置 cn.vitejs.dev/guide/using…

import { resolve } from 'path'
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig ({
    // 打包构建
    build: {
        rollupOptions: {
            // 确保外部化处理那些你不想打包进库的依赖 
            external: ['vue'],
            // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
            output: {  
                globals: { 
                    vue: 'Vue' 
                } 
            }
            // 多页面应用配置
            input: {
                main: resolve(__dirname, 'index.html'),
                nested: resolve(__dirname, 'nested/index.html')
            }
        }
    },
    // 添加插件
    plugins: [
        legacy({
            targets: ['defaults', 'not IE 11']
        }),
        // pre：在 Vite 核心插件之前调用该插件
        // 默认：在 Vite 核心插件之后调用该插件
        // post：在 Vite 构建插件之后调用该插件
        enforce: 'pre'
        // 默认情况下插件在开发 (serve) 和生产 (build) 模式中都会调用。
        // 如果插件在服务或构建期间按需使用，请使用 apply 属性指明它们仅
        // 在 build 或 serve 模式时调用
        apply: 'build'
        
    ]
})