vite
vite概念
-
vite是一个面向现代浏览器的一个更轻、更快的Web应用开发工具
-
它基于ECMAScript标准原生模块系统（ES Modules）实现
vite项目依赖
-
vite
-
@vue/compiler-sfc
基础使用
-
vite serve
-
是一个用于启动web开发的服务器，启动服务器的时候不需要编译所有的代码文件，启动非常快
-
-
Vite build
-
Rollup
-
Dynamic import
-
Polyfill
-
-
vite核心功能
-
静态Web服务器
-
编译单文件组件
-
拦截浏览器不识别的模块，并处理
-
-
HMR
-
vite HMR
-
立即编译当前所修改的文件
-
-
Webpack HMR
-
会自动以这个文件为入口重写build一次，所有的涉及到的依赖也都会被加载一遍
-
-
vite特性
-
快速冷启动
-
模块热更新
-
按需编译
-
开箱即用
-
TypeScript-内置支持
-
less/sass/stylus/postcss-内置支持（需要单独安装）
-
jsx
-
Web Assembly
-
代码案例
#!/usr/bin/env node
const path=require('path')
const { Readable } =require('stream')
const Koa = require('koa')
const send = require('koa-send')
const compilerSFC=require('@vue/compiler-sfc')
const { COPYFILE_EXCL } = require('constants')const app = new Koa()const streamToString = stream => new Promise((resolve, reject) => {const chunks = []stream.on('data', chunk => chunks.push(chunk))stream.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))stream.on('error', reject)
})const stringToStream =text =>{const stream =new Readable()stream.push(text)stream.push(null)return stream
}
// 3.加载第三方模块
app.use(async (ctx, next) => {//ctx.path ->/@modules/vueif (ctx.path.startsWith('/@modules/')) {const moduleName = ctx.path.substr(10)const pkgPath=path.join(process.cwd(),'node_modules',moduleName,'package.json')const pkg=require(pkgPath)ctx.path=path.join('/node_modules',moduleName,pkg.module)}await next()
})// 1.开启静态文件服务器
app.use(async (ctx, next) => {await send(ctx, ctx.path, { root: process.cwd(), index: 'index.html' })await next()
})
// 4.处理单文件组件
app.use(async (ctx,next)=>{if(ctx.path.endsWith('.vue')){const contents = await streamToString(ctx.body)const { descriptor} = compilerSFC.parse(contents)let code // 第一次请求if(!ctx.query.type){code=descriptor.script.content// console.log(code)code = code.replace(/export\s+default\s+/g, 'const __script = ')code += `import { render as __render } from "${ctx.path}?type=template"__script.render = __renderexport default __script`}else if(ctx.query.type==='template'){const templateRender = compilerSFC.compileTemplate({ source:descriptor.template.content })code =templateRender.code}ctx.type='application/javascript'ctx.body = stringToStream(code)}await next()})
// 2.修改第三方模块的路径
app.use(async (ctx, next) => {if (ctx.type === 'application/javascript') {const contents = await streamToString(ctx.body)// import vue from 'vue'// import App from './App.vue' ctx.body = contents.replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/').replace(/process\.env\.NODE_ENV/g, '"development"')}
})
app.listen(3000)
console.log('Server running @http://localhost:3000')
vite
vite概念
-
vite是一个面向现代浏览器的一个更轻、更快的Web应用开发工具
-
它基于ECMAScript标准原生模块系统（ES Modules）实现
vite项目依赖
-
vite
-
@vue/compiler-sfc
基础使用
-
vite serve
-
是一个用于启动web开发的服务器，启动服务器的时候不需要编译所有的代码文件，启动非常快
-
-
Vite build
-
Rollup
-
Dynamic import
-
Polyfill
-
-
vite核心功能
-
静态Web服务器
-
编译单文件组件
-
拦截浏览器不识别的模块，并处理
-
-
HMR
-
vite HMR
-
立即编译当前所修改的文件
-
-
Webpack HMR
-
会自动以这个文件为入口重写build一次，所有的涉及到的依赖也都会被加载一遍
-
-
vite特性
-
快速冷启动
-
模块热更新
-
按需编译
-
开箱即用
-
TypeScript-内置支持
-
less/sass/stylus/postcss-内置支持（需要单独安装）
-
jsx
-
Web Assembly
-
代码案例
#!/usr/bin/env node
const path=require('path')
const { Readable } =require('stream')
const Koa = require('koa')
const send = require('koa-send')
const compilerSFC=require('@vue/compiler-sfc')
const { COPYFILE_EXCL } = require('constants')const app = new Koa()const streamToString = stream => new Promise((resolve, reject) => {const chunks = []stream.on('data', chunk => chunks.push(chunk))stream.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))stream.on('error', reject)
})const stringToStream =text =>{const stream =new Readable()stream.push(text)stream.push(null)return stream
}
// 3.加载第三方模块
app.use(async (ctx, next) => {//ctx.path ->/@modules/vueif (ctx.path.startsWith('/@modules/')) {const moduleName = ctx.path.substr(10)const pkgPath=path.join(process.cwd(),'node_modules',moduleName,'package.json')const pkg=require(pkgPath)ctx.path=path.join('/node_modules',moduleName,pkg.module)}await next()
})// 1.开启静态文件服务器
app.use(async (ctx, next) => {await send(ctx, ctx.path, { root: process.cwd(), index: 'index.html' })await next()
})
// 4.处理单文件组件
app.use(async (ctx,next)=>{if(ctx.path.endsWith('.vue')){const contents = await streamToString(ctx.body)const { descriptor} = compilerSFC.parse(contents)let code // 第一次请求if(!ctx.query.type){code=descriptor.script.content// console.log(code)code = code.replace(/export\s+default\s+/g, 'const __script = ')code += `import { render as __render } from "${ctx.path}?type=template"__script.render = __renderexport default __script`}else if(ctx.query.type==='template'){const templateRender = compilerSFC.compileTemplate({ source:descriptor.template.content })code =templateRender.code}ctx.type='application/javascript'ctx.body = stringToStream(code)}await next()})
// 2.修改第三方模块的路径
app.use(async (ctx, next) => {if (ctx.type === 'application/javascript') {const contents = await streamToString(ctx.body)// import vue from 'vue'// import App from './App.vue' ctx.body = contents.replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/').replace(/process\.env\.NODE_ENV/g, '"development"')}
})
app.listen(3000)
console.log('Server running @http://localhost:3000')