【Vite 源码学习】3. package.json分析

本文主要分析Vite使用的dependencies和devDependencies来学习Vite用到的第三方库dependencies 分析@babel/parser Babel JavaScript解释器。

@rollup/plugin-commonjs Rollup支持CommonJS语法@rollup/plugin-json Rollup支持json@rollup/plugin-node-resolve

Rollup插件，用于使用Node定位模块的方式来定位第三方库例如：import{nodeResolve}from@rollup/plugin-node-resolve;exportdefault{input

:src/index.js,output:{dir:output,format:cjs},plugins:[nodeResolve()]};@types/* TypeScript 类型定义（库本身未使用TypeScript）- （此处的类型定义会用于Vite运行时供使用者使用。

）@vue/compiler-dom Vue template 编译器@vue/compiler-sfc Vue底层单文件组件(Single File Component) 底层工具集brotli-size

使用brotli压缩字符串或者Bufferchalk 命令行样式库chokidar Node.js 监听文件变化插件clean-css Node.js和现代浏览器下快速并且高效的CSS优化器Vite用它来压缩CSS，如下为Vite中的使用示例：。

// src/node/build/buildPluginCss.ts unction minifyCSS(css: string) { CleanCSS = CleanCSS || require(clean-css) const res = new CleanCSS({ level: 2, rebase: false }).minify(css) if (res.errors && res.errors.length) { console.error(chalk.red(`[vite] error when minifying css:`)) console.error(res.errors) } if (res.warnings && res.warnings.length) { console.error(chalk.yellow(`[vite] warnings when minifying css:`)) console.error(res.warnings) } return res.styles }

debug Node.js和浏览器下极小的JavaScript调试工具dotenv 可以从.env 文件加载环境变量到process.env的零依赖模块dotenv-expand dotenv的扩展工具。

es-module-lexer ESM的词法分析器esbuild JavaScript 打包和压缩工具压缩可以在terser和esbuild之间选择，默认为terserVite使用它将TypeScript转义成JS，比tsc快20到30倍。

etag 用于在HTTP response中生成HTTP ETagsexeca 用于在命令行中执行命令例如：// src/node/utils/openBrowser.ts function executeNodeScript(scriptPath: string, url: string) { const extraArgs = process.argv.slice(2) const child = execa(node, [scriptPath, …extraArgs, url], { stdio: inherit }) child.on(close, (code) => { if (code !== 0) { console.log() console.log( chalk.red( The script specified as BROWSER environment variable failed. ) ) console.log(chalk.cyan(scriptPath) + exited with code + code + .) console.log() return } }) return true }。

fs-extra 添加Node.js fs 模块没有的文件系统方法，并且给fs方法增加promise支持 Vite主要用于返回Promise，Vite中的使用示例：// src/node/optimizer/index.ts import fs from fs-extra let prevhash try { prevhash = await fs.readFile(hashPath, utf-8) } catch (e) {}。

hash-sum 极快的唯一哈希生成器，例如：// src/node/build/buildPluginAsset.ts import hash_sum from hash-sum const ext = path.extname(id) const baseName = path.basename(id, ext) const resolvedFileName = `${baseName}.${hash_sum(id)}${ext}`

isbuiltin 返回是否为node 模块自带var isBuiltIn = require(isbuiltin); isBuiltIn(console); => true isBuiltIn(woosh); => false。

koa Koa是由Express的团队设计的新的web框架目标是为web应用和API打造更小更易表现更健壮的基础koa-conditional-get 有条件的获取GET请求插件，用于返回304请求koa-etag

为koa增加etag支持koa-proxies http代理中间件koa-send 静态文件中间件例子：app.use(async (ctx) => { await send(ctx, ctx.path, { root: __dirname + /public }); })。

koa-static 静态文件中间件，封装了koa-send例子：const serve = require(koa-static); const Koa = require(koa); const app = new Koa(); // $ GET /package.json app.use(serve(.)); // $ GET /hello.txt app.use(serve(test/fixtures)); // or use absolute paths app.use(serve(__dirname + /test/fixtures)); app.listen(3000); console.log(listening on port 3000);。

lru-cache 使用删除最近最少使用策略的缓存对象magic-string 用于简单的修改string（添加头或者尾，修改内容）和生成source mapVite中的使用例子：import MagicString from magic-string transform({ id, code }) { const s = new MagicString(code) const i = code.indexOf(`=`) const cur = code.substring(i + 2, i + 3) s.overwrite(i + 2, i + 3, String(Number(cur) + 1)) // test source map by appending lines s.prepend(`\n\n\n`) return { code: s.toString(), map: s.generateMap({ source: id, includeContent: true }) } }。

merge-source-map 由于合并新旧source mapmime-types 用于返回HTTP content-type例如：var mime = require(mime-types) mime.lookup(json) // application/json mime.lookup(.md) // text/markdown mime.lookup(file.html) // text/html mime.lookup(folder/file.js) // application/javascript mime.lookup(folder/.htaccess) // false mime.lookup(cats) // false。

minimist 用于解析执行的命令行的参数，例如：$ node example/parse.js -a beep -b boop var argv = require(minimist)(process.argv.slice(2)); console.log(argv); => { _: [], a: beep, b: boop }

Vite的使用实例：const argv = require(minimist)(process.argv.slice(2)) // make sure to set debug flag before requiring anything if (argv.debug) { process.env.DEBUG = `vite:` + (argv.debug === true ? * : argv.debug) try { // this is only present during local development require(source-map-support).install() } catch (e) {} }

open 跨平台打开URL，文件或者可执行文件ora 命令行状态提示，会有一个圈圈一直在转Vite的使用实例：// src/node/build/index.ts let spinner: Ora | undefined const msg = Building for production… if (!silent) { if (process.env.DEBUG || isTest) { console.log(msg) } else { spinner = require(ora)(msg + \n).start() } } … spinner && spinner.stop()。

postcss CSS-IN-JS的CSS框架postcss-discard-comments 使用PostCSS删除CSS文件中的注释postcss-import post PostCSS中支持@import。

postcss-load-config PostCSS支持从配置文件中读取配置（package.json或者.postcssrc）resolve 实现Node.js 的 require.resolve()

rollup 基于ES2015的JavaScript打包工具rollup-plugin-dynamic-import-variables Rollup 动态import支持变量例如：function importLocale(locale) { return import(`./locales/${locale}.js`); }。

会被编译成：function __variableDynamicImportRuntime__(path) { switch (path) { case ./locales/en-GB.js: return import(./locales/en-GB.js); case ./locales/en-US.js: return import(./locales/en-US.js); case ./locales/nl-NL.js: return import(./locales/nl-NL.js); default: throw new Error(Unknown variable dynamic import: + path); } } function importLocale(locale) { return __variableDynamicImportRuntime__(`./locales/${locale}.js`); }

rollup-plugin-terser Rollup 减小生成的ES包大小的插件rollup-plugin-vue Rollup Vue 3 单文件组件插件rollup-plugin-web-worker-loader

Rollup web worker 插件selfsigned 使用Node.js生成自签证书slash 将Windows路径中的反斜杠转化成斜杠vue Vue 3.0ws Node.js WebSocket库。

devDependencies 分析@babel/runtime Babel 运行时工具@pika/react @pika/react-dom React 支持@types/es-module-lexer @types/fs-extra @types/hash-sum @types/jest @types/mime-types @types/node @types/postcss-import @types/postcss-load-config @types/serve-handler @types/ws

TypeScript类型定义文件bootstrap 一款非常有名的前端框架conventional-changelog-cli 从git 元数据中生成change log.cross-env 跨平台设置和读取环境变量。

jest 当前非常流行的JavaScript测试框架js-yaml 对YAML文件进行支持less 一个CSS框架lint-staged 对staged的GIT文件调用linter进行检查lodash-es。

ES版lodashmoment 轻量JavaScript日期库normalize.css 可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一Normalize.css的作用：保留有用的默认值，不同于许多 CSS 的重置。

标准化的样式，适用范围广的元素纠正错误和常见的浏览器的不一致性一些细微的改进，提高了易用性使用详细的注释来解释代码npm-run-all 一个支持同步或并行运行npm脚本的CLI工具postcss-nesting。

支持PostCSS样式嵌套preact React的轻量化替代方案，大小只有3Kprettier 专注代码格式化pug 深度参考Haml的一个高性能模板引擎，支持Node.js和浏览器以前的名字是Jade。

puppeteer 提供高阶API通过DevTools协议控制Chrome或ChromiumNode的Node库sass 纯JavaScript版CSS框架source-map-support source map支持。

typescript TypeScript支持vue-router Vue 路由vuex Vue 状态管理yorkie GIT hooks支持，可做GIT提交前代码检查相关链接上一篇：Lee Wen：【Vite 源码学习】2. Vite构建工具为什么用Rollup。

23 赞同 · 4 评论文章

下一篇：待更新