文章前言

笔记来源：拉勾教育大前端高薪训练营

阅读建议：内容较多，建议通过左侧导航栏进行阅读

Vite 工具

基本概念

Vite 是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具
它基于 ECMAScript 标准原生模块系统（ES Modules）实现

ES Module

现代浏览器都支持 ES Module（IE不支持）

通过下面的方式加载模块

  <script type="module" src="..."></script>

支持模块的 script 默认延迟加载
- 类似于 script 标签设置 defer
- 在文档解析完成后，触发 DOMContentLoaded 事件前执行

Vite as Vue-CLI

Vite 在开发模式下不需要打包可以直接运行
Vue-CLI 开发模式下必须对项目打包才可以运行
Vite 在生产环境下使用 Rollup 的方式打包
- 基于 ES Module 的方式打包
Vue-CLI 使用 Webpack 打包
Vite 启动服务 vite serve
Vue-CLI 启动服务 vue-cli-service serve

开箱即用

TypeScript - 内置支持
less/sass/stylus/postcss - 内置支持（需要单独安装）
JSX
Web Assembly

HMR

Vite HMR
- 立即编译当前所修改的文件
Webpack HMR
- 会自动以这个文件为入口重写 build 一次，所有的涉及到的依赖也都会被加载一遍

Vite 特点

快速冷启动
- 解决 webpack 冷启动慢
按需编译
模块热更新
- 解决 webpack 热更新速度慢
开箱即用
- 避免各种 loader 以及 plugins 的配置

项目依赖

Vite
@vue/compiler-sfc：编译项目中的 .vue 结尾的单文件组件

Vite 创建项目

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

基于模板创建项目

npm init vite-app --template react
npm init vite-app --template preact

Vite 核心功能

静态 Web 服务器
编译单文件组件
- 拦截浏览器不识别的模块，并处理
HMR

静态 Web 服务器

示例代码，如图所示：

#!/usr/bin/env node
const path = require('path')
const { Readable } = require('stream')
// 使用 Koa 开发静态服务器，Koa 是一个新的 web 框架
const Koa = require('koa')
const send = require('koa-send')
const compilerSFC = require('@vue/compiler-sfc')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) => {/*** @param {} ctx 当前执行的上下文* @param { String } path 当前请求的路径* @param { Object } options 配置选项*/await send(ctx, ctx.path, {root: process.cwd(), // 配置项目运行的根目录，即当前运行node程序的目录index: 'index.html' // 设置默认的页面})await next()
})// 4. 处理单文件组件 @vue/compiler-sfc
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 = __render
export 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');

【Vue 3.0 新特性（三）】Vite 工具相关推荐

Vue 3.0 新特性及使用方法
介绍 2020年9月19日凌晨,尤雨溪大大正式发布了 Vue.js 3.0 版本,代号:One Piece.此框架新的主要版本提供了更好的性能.更小的捆绑包体积.更好的 TypeScript 集成.用 ...
【Vue 3.0 新特性（一）】源码的组织方式
文章前言笔记来源:拉勾教育大前端高薪训练营 Vue 3.0 源码的组织方式一.源码采用 TypeScript 重写为了提升代码的可维护性,源码都使用 TypeScript 编写,大型项目项目的 ...
老子学不动系列：Vue 3.0 新特性预览
尤大昨天在 Vue Toronto 的主题演讲中预览了 Vue 3 .通过利用现代浏览器支持的新功能,Vue 3 将成为我们已经了解和喜爱的Vue.js 的改进版本. 我们期待的 Vue 3 将会是: ...
【Vue 3.0 新特性（四）】Vue 3.0 响应式系统原理
文章前言笔记来源:拉勾教育大前端高薪训练营阅读建议:内容较多,建议通过左侧导航栏进行阅读 Vue 3.0 响应式系统原理基础回顾 Vue.js 响应式回顾 Proxy 对象实现属性监听多层属 ...
RecyclerView（三）实现聊天窗口样式（Android 5.0 新特性）
Android RecyclerView(三)实现聊天窗口样式(Android 5.0 新特性) 效果 1 聊天窗口子视图布局文件 1.1 左边消息视图布局文件使用到的背景图片 <?xml v ...
Servlet 3.0 新特性概述
Servlet 3.0 新特性概述 Servlet 3.0 作为 Java EE 6 规范体系中一员,随着 Java EE 6 规范一起发布.该版本在前一版本(Servlet 2.5)的基础上提供了若 ...
Servlet 3.0 新特性详解
https://www.ibm.com/developerworks/cn/java/j-lo-servlet30/ Servlet 3.0 新特性概述 Servlet 3.0 作为 Java EE ...
mysql sdi_MySQL 8.0新特性：数据字典
一.概述数据字典(Data Dictionary)中存储了诸多数据库的元数据信息,包括基本Database, table, index, column, function, trigger, pro ...
Android5.0，6.0，7.0，8.0新特性整理
背景 Android5.0(Android Lollipop)是谷歌公司2014年10月发布的全新安卓系统,至今已经两年多.然而由于国产手机对安卓ROM的深度定制或修改,以及手机厂商.芯片制造商.运营 ...

【Vue 3.0 新特性（三）】Vite 工具

文章前言

Vite 工具

基本概念

ES Module

Vite as Vue-CLI

开箱即用

HMR

Vite 特点

项目依赖

Vite 创建项目

Vite 核心功能

静态 Web 服务器

【Vue 3.0 新特性（三）】Vite 工具相关推荐

最新文章

热门文章