vite
关注
分享
扫一扫
vite实践&源码
神奇大叔
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vite 函数相关api
1、createServer .创建vite服务器 async function createServer(inlineConfig?: InlineConfig): Promise<ViteDevServer> 参数： inlineConfig接口扩展了 UserConfig 并添加了以下属性 .configFile：指明要使用的配置文件。如果没有设置，Vite 将尝试从项目根目录自动解析。设置为 false 可以禁用自动解析功能 .envFile：设置为 false原创 2022-03-08 14:18:47 · 695 阅读 · 0 评论 -
vite 基础配置
兼容老浏览器 默认情况下 Vite 只处理语法转译，且默认不包含任何 polyfill。 通过引入polyfill 可以前往 Polyfill.io 查看，这是一个基于用户浏览器 User-Agent 字符串自动生成 polyfill 包的服务 通过插件支持: 通过插件@vitejs/plugin-legacy来支持，它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill 兼容版的chunk只会在不支持原生 ESM 的浏览器中进行按需加载公共基础路径原创 2022-03-04 17:07:04 · 21436 阅读 · 0 评论 -
vite 对比传统打包方式优点（暂存）
模块预打包<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite.原创 2022-03-08 16:41:00 · 426 阅读 · 0 评论 -
vite 打包库
在 Vite 中可以使用 index.html 获得如丝般顺滑的开发体验。基本配置: module.exports = defineConfig({ build: { lib: { entry: path.resolve(__dirname, 'lib/main.js'), name: 'MyLib', fileName: (format) => `my-lib.${format}.js` }, rollupOptio原创 2022-03-04 17:14:21 · 3519 阅读 · 0 评论 -
vite 插件配置
1、插件配置 项目根目录新建vite.config.js 引入下载的插件,在plugins中使用 import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' export default defineConfig({ plugins: [ legacy({ targets: ['defaults', 'not IE 11'] }) ] })原创 2022-03-04 16:52:39 · 4857 阅读 · 0 评论 -
vite 基于vite额外功能
基于vite打包,将会提供如下额外功能1、css .module.css为后缀名的CSS文件都被认为是一个 CSS modules 文件 import classes from './example.module.css' document.getElementById('foo').className = classes.red2、静态资源处理 (1)导入一个静态资源会返回解析后的 URL： import imgUrl from './img.png' document.get原创 2022-03-04 15:31:20 · 766 阅读 · 0 评论 -
vite hmr热更新
1、请确保用一个条件语句守护所有 HMR API 的使用，这样代码就可以在生产环境中被 tree-shaking 优化： if (import.meta.hot) { // HMR 代码 }2、hmr相关api (1)hot.accept 接收自身模块热更新 export const count = 1 if (import.meta.hot) { import.meta.hot.accept((newModule) => { newMod原创 2022-03-08 13:53:52 · 2393 阅读 · 0 评论