vite 尝试和入门

Wesley13
• 阅读 1053

原文链接: vite 尝试和入门

Vite 原理浅析

https://github.com/vitejs/vite

前端新工具--vite从入门到实战(一)

vite —— 一种新的、更快地 web 开发工具

原理

前端打包工具是将树形代码打包为一个文件或者根据模块打包成多个文件, 如果树中的任意一个节点发生变化, 那么引用该节点的所有节点和模块都要重新打包, 对于大型项目来说, 改一行代码可能就需要重新打包很久

vite的思想是开发时使用浏览器自己的import/export不进行打包, 这样热更新的时候如果文件发生了变化,只需要更新相关文件内容, 无需进行大量无效计算, 发布的时候使用rollup打包成生产环境代码, 对浏览器的要求比较高, 但是提高了开发效率

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="module" src="index.js"></script>
</head>
</html>

index.js

注意这里引入的时候使用了文件名包含后缀, 浏览器会使用该路径去请求资源, 使用缩写的话会报404

import {Stu} from './Stu.js'

let s = new Stu('ace')
s.say()

stu.js

export class Stu {
  constructor(name) {
    this.name = name
  }

  say() {
    console.log('hello', this.name)
  }
}

访问index.html 是可以正确输出结果的

vite 尝试和入门

vite上手

简单使用就几行代码

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

vite 尝试和入门

默认的主页面

vite 尝试和入门

注入环境变量并引入main.js

vite 尝试和入门

在main.js中将模块引用重写, 注意后面加了文件类型

vite 尝试和入门

vue文件分了几个部分, 包括模板,脚本,样式三个

vite 尝试和入门

vite 尝试和入门

修改文件

vite 尝试和入门

source map解密后

vite 尝试和入门

同时ws的更新信息

vite 尝试和入门

一个使用 @vue/compiler-sfc 和  @vue/compiler-dom  实现的简单serve

https://github.com/shengxinjing/vue3-vs-vue2/blob/master/vite-mini/server.js

存在的问题

目前社区中大部分模块都没有设置默认导出 esm,而是导出了 cjs 的包,既然 vue3.0 需要额外处理才能拿到 esm 的包内容,那么其他日常使用的 npm 包是不是也同样需要支持?答案是肯定的,目前在 vite 项目里直接使用 lodash 还是会报错的。

不过 vite 在最近的更新中,加入了 optimize 命令,这个命令专门为解决模块引用的坑而开发,例如我们要在 vite 中使用 lodash,只需要在 vite.config.js (vite 配置文件)中,配置 optimizeDeps 对象,在 include 数组中添加 lodash。

// vite.config.js
module.exports = {
  optimizeDeps: {
    include: ["lodash"]
  }
}

这样 vite 在执行 runOptimize 的时候中会使用 roolup 对 lodash 包重新编译,将编译成符合 esm 模块规范的新的包放入 node_modules 下的 .vite_opt_cache 中,然后配合 resolver 对 lodash 的导入进行处理:使用编译后的包内容代替原来 lodash 的包的内容,这样就解决了 vite 中不能使用 cjs 包的问题,这部分代码在 depOptimizer.ts 里。

不过这里还有个问题,由于在 depOptimizer.ts 中,vite 只会处理在项目下 package.json 里的 dependencies 里声明好的包进行处理,所以无法在项目里使用

但是build命令可以正常使用

即便指定了文件后缀, 但是对于cjs的支持依然不是很好

import pick from 'lodash/pick.js'

console.log('pick',pick)

在添加了export导出后报错, 因为浏览器只支持import语法

vite 尝试和入门

vite 尝试和入门

这意味着只能这么用

import lodash from 'lodash'

lodash.pick()
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Android蓝牙连接汽车OBD设备
//设备连接public class BluetoothConnect implements Runnable {    private static final UUID CONNECT_UUID  UUID.fromString("0000110100001000800000805F9B34FB");
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这