学会这20个库，让你快速看懂 vue3 和 vite3 源码( 三 ) _vue3

const modules = import.meta.glob('./dir/*.js', { query: { foo: 'bar', bar: true } })复制代码vite 通过 fast-glob 工具把它生成如下代码
// vite 生成的代码const modules = {'./dir/foo.js': () =>import('./dir/foo.js?foo=bar&bar=true').then((m) => m.setup),'./dir/bar.js': () =>import('./dir/bar.js?foo=bar&bar=true').then((m) => m.setup)}复制代码11. debugdebug 是一个模仿 Node.js 核心调试技术的小型 JavaScript 调试程序，在适用于 Node.js 和 Web 浏览器都可使用；debug 只在 vite 工具源码中有使用；
说直白点就是你可以使用 debug 来对你的程序进行毫秒级别时间差的统计对你程序代码进行优化；

文章插图

使用：

var debug = require('debug')('http'), http = require('http'), name = 'My App';// fake appdebug('booting %o', name);http.createServer(function(req, res){debug(req.method + ' ' + req.url);res.end('hellon');}).listen(3000, function(){debug('listening');});// fake worker of some kindrequire('./worker');复制代码

如果你对你的代码或者自研的工具等有较高性能要求，强烈建议可以使用 debug 来进行调式。

12. dotenvdotenv 是一个零依赖模块，可将 .env 文件中的环境变量加载到 process.env 中；dotenv 只在 vite 工具源码中有使用；
如何使用：

创建 .env 文件
S3_BUCKET="YOURS3BUCKET" SECRET_KEY="YOURSECRETKEYGOESHERE" 复制代码
使用
import * as dotenv from 'dotenv' dotenv.config() console.log(process.env) 复制代码

13. esbuildesbuild 是一个基于 Go 语言开发的 JavaScript 打包工具，被 Vite 用于开发环境的依赖解析；
相比传统的打包工具，主打性能优势，在构建速度上可以快 10~100 倍；

文章插图

到现在知道为啥 vite 为啥快了吧，esbuild 就是第一功臣。

优势：

没有缓存机制也有极快的打包速度
支持es6和cjs模块
支持es6 modules的tree-shaking
支持ts和jsx
sourcemap
压缩工具
自定义的插件开发

使用：
esbuild 在 API 层面上非常简洁, 主要的 API 只有两个: Transform 和 Build, 这两个 API 可以通过 CLI, JavaScript, Go 的方式调用；

transform：调用这个API能将 ts，jsx 等文件转换为js文件；

// cliexbuild ./test.ts --loader=ts // 输出 const str = 'Hello World';// js api调用const esbuild = require('esbuild');const fs = require('fs');const path = require('path');const filePath = path.resolve(__dirname, 'test.ts');const code = esbuild.transformSync(fs.readFilesync(filePath), {loader: 'ts',})console.log(code);// 输出// {//code: 'const str = 'Hello World'',//map: '',//warnings: []// }

build：整合了transform后的代码，可以将一个或者多个文件转换并保存为文件；

// cliesbuild test.ts --outfile=./dist/test.js // { errors: [], warnings: [] }// js api调用const esbuild = require('esbuild');const path = require('path');const result = esbuild.buildSync({entryPoints: [path.resolve(__dirname, 'test.ts')],outdir: path.resolve(__dirname, 'dist'),});console.log(result); // { errors: [], warnings: [] }

14. rolluprollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，我们熟悉的 vue、react、vuex、vue-router 等都是用 rollup 进行打包的。
在 vite 中的生产环境（Production）就是基于 rollup 打包来构建主要代码的。
使用：