基础

基于原生的es-module的构建工具

hmr Hot Module Replacement

vite esbuild 使用go编写

esm原生源码

tree-shaking chunk分隔操作

创建vite向导

pnpm create vite

vanilla 最轻量的跨平台框架

preact react代替品最轻量的框架和性能

lit 轻量级的一个web组件的一个简单的库

svelte 全新的构建用户界面的方法

依赖预构建过程两个目的：

1.CommonJS和UMD兼容性

2.性能(依赖单独文件导入)

自动依赖搜索

esbuild:

极快的速度而不需要缓存

es6和commonjs模块支持

es6模块的tree shaking

一个用于javascript和go的api

typescript和jsx语法支持

source maps 支持

简化打包

插件支持

data: hmrapi

accept 模块移除的时候执行回调

prune移除模块的时候执行

dispose 清除任何由其更新副本产生的持久的副作用(比如重载之后定时器未清理)

decline 模块不可热更新(直接刷新)

invalidate 执行的时候加载页面(刷新页面)

on 表示可以鉴定自定义的hmr事件

条件守卫

if(imprt.meta.hot){
    import.meta.hot.accept((newModule)=>{
        console.log(newModule.count)
    })
}
let timer = setInterval(()=>{

},1000)

if(imprt.meta.hot){
    import.meta.hot.dispose(()=>{
        clearInterval(timer)
        //清理副作用
    })
}
let cache = {
    amount: 0
}
//缓存值
cache = import.meta.hot.data.cache={
    amount:import.meta.hot.data.cache?import.meta.hot.data.cache.amount:0
}

import.meta.hot.decline()

vite使用typescript

tsc --noEmit

vue-tsc --noEmit

vite使用esbuild将ts转换成js

esbuild只做单个模块的导入

(模块导入后再导出报错 )

tsconfig.json

"isolateModules":true

vite中的vue

vite为vue提供第一优先级支持：

vue3单文件组件支持 @vitejs/plugin-vue

vue2支持：underfin/vite-plugin-vue2

地址：github.com/underfin/vite-plugin-vue2

vue3jsx支持：@vitejs/plugin-vue-jsx

pnpm i @vitejs/plugin-vue-jsx -D

地址：github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx

vite支持vue2

pnpm create vite
vanilla
pnpm i vite-plugin-vue2 -D
创建文件vite.config.js内容：
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'

export default defineConfig({
    plugins:[
        createVuePlugin()
    ]
})
安装vue2
pnpm i vue@2

App.vue内容：
main.js内容：
import Vue from 'vue'
<template>
    <div>hello</div>
<template>
import App from './App.vue'
new Vue({
    el:'#app',
    render: h=>(App)
})
pnpm i vue-template-compiler

vite中使用jsx

vite中使用css

vite静态资源处理

vite使用webworker

纯js下使用web worket
const worker = new Worker('./worker.js')
vite中使用 web worker
import MyWorker from './worker?worker'
const worker = new MyWorker()

worker.js内容:
var i = 0
function timedCount(){
    i++
    postMessage(i)
    setTimeout(timedCount,1000)
}
timeCount()

main.js内容:
const worker = new Worker('./worker.js')
worker.onmessage = function(ev){
    console.log(ev.data);
} 
vue中使用main.js内容：
import MyWorker from './worker?worker'
worker.onmessage=function(ev){
    console.log(ev.data)
}

vite中使用webAssembly:

main.js内容
import init from './math.wasm'

init().then(exports=> {
    console.log(exports.add(1,2));
})

vite中json和Glob导入

# 基础

基础