Vite学习与记录理解+常用功能

yolo612
186 阅读2分钟

文章前面概念解释相关的东西 多一些 后面整体就是实战 + 经验总结部分

vite的external用法

rollupOptions: { 
    external: ['vue'], 
    output: { 
        globals: { vue: 'Vue' } 
    }
}

配置解释：

external: ['vue']（外部化 vue）

  • 作用：

    • 告诉 Rollup，不要打包 vue 这个依赖，而是 让它在运行时从外部环境获取。
    • 这样，最终的 dist 产物不会包含 vue 代码，减少打包体积。

  • 适用场景：

    • 组件库（如 @yolo/components）通常不会内置 Vue，而是由使用者提供。
    • SSR（服务端渲染） 时，Vue 可能已经全局存在，不需要重复打包。

globals: { vue: 'Vue' }（为 vue 指定全局变量）

  • 作用：

    • 当打包格式是 UMD 或 IIFE 时，告诉 Rollup：Vue 应该从 window.Vue 这个全局变量获取，而不是 import vue from 'vue' 。

    • 这样 在浏览器 <script> 方式引入时，不会找不到 Vue。

  • 适用场景：

    • 你发布的库可能会在 CDN 引入 Vue 的环境下运行，例如：
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.0"></script>
<script src="your-library.umd.js"></script>
  • Vue 由 CDN 提供，不能再 import。 【框架内开发代码中 依然是import vue】
  • 你的库就会自动从 window.Vue 获取 Vue。

注：对比webpack的配置：external

场景Vite / Rollup 方案Webpack 方案
Vue 组件库（如 Element Plus）external: ['vue']，globals: { vue: 'Vue' }externals: { vue: 'Vue' }
SDK / 第三方插件（如统计 SDK）external: ['@kk/stats-web']，globals: { '@kk/stats-web': 'StatsSDK' }externals: { '@kk/stats-web': 'StatsSDK' }
CDN 兼容（让库从 window 取值）globals: { vue: 'Vue' }externals: { vue: 'Vue' }

Vite构建的时候css文件是怎么处理的

（1）手动引入的css/sass文件

import './styles/index.scss'

当在 main.ts 【构建的ts文件】里这样引入 index.scss：

  • Vite 会解析并编译 SCSS。

  • 如果 vite.config.ts 没有特殊配置，它最终会被打包进独立的 CSS 文件，比如 dist/style.css。

(注：在 vite.config.ts 里，可以配置 cssCodeSplit: true)

  • 在 package.json 里可以指定 "style": "dist/style.css" 让外部项目正确加载 CSS。

（2）组件内部使用 <style scoped lang="scss">

  • Vite 通过 vue-loader 会将 CSS 转换成局部作用域的 style 标签。

  • CSS 代码不会单独打包，而是会被编译成 JavaScript 并作用于组件内部。

vite针对仅支持ESM的package如何处理

问题描述：在配置unocss后，运行pnpm run dev时，报错如下：

image.png

问题分析：unocss0.59.x已经不支持commonjs了，仅仅支持ESM（只使用 ESM 来管理模块依赖，不再支持 CommonJS 或 AMD 等其他模块化方案），可以查看《unocss的发布变更日志》：

解决办法：可以参考《This package is ESM only》文档说明： （1）：package中加type：module （2）：修改vite.config.ts 为vite.config.mts

avatar
文章
阅读
粉丝