#@esmx/rspack-vue

Rspack Vue 包提供了一套用于创建和配置基于 Vue 框架的 Rspack 应用的 API，支持 Vue 组件的开发、构建与服务端渲染。

#安装

使用包管理器安装 @esmx/rspack-vue 开发依赖：

npm install @esmx/rspack-vue -D

yarn add @esmx/rspack-vue -D

pnpm add @esmx/rspack-vue -D

bun add @esmx/rspack-vue -D

deno add npm:@esmx/rspack-vue -D

#类型导出

#BuildTarget

type BuildTarget = 'node' | 'client' | 'server'

构建目标环境类型，定义了应用程序的构建目标环境，用于配置构建过程中的特定优化和功能：

• node: 构建为 Node.js 环境运行的代码
• client: 构建为浏览器环境运行的代码
• server: 构建为服务端环境运行的代码

#RspackAppConfigContext

interface RspackAppConfigContext {
  esmx: Esmx
  buildTarget: BuildTarget
  config: RspackOptions
  options: RspackAppOptions
}

Rspack 应用配置上下文接口，提供了在配置钩子函数中可以访问的上下文信息：

• esmx: Esmx 框架实例
• buildTarget: 当前的构建目标（client/server/node）
• config: Rspack 配置对象
• options: 应用配置选项

#RspackAppOptions

interface RspackAppOptions {
  css?: 'css' | 'js' | false
  loaders?: {
    styleLoader?: string
  }
  styleLoader?: Record<string, any>
  cssLoader?: Record<string, any>
  target?: {
    web?: string[]
    node?: string[]
  }
  definePlugin?: Record<string, any>
  config?: (context: RspackAppConfigContext) => void | Promise<void>
}

Rspack 应用配置选项接口：

• css: CSS 输出方式，可选 'css'（独立文件）或 'js'（打包到JS中），默认根据环境自动选择：生产环境使用'css'以优化缓存和并行加载，开发环境使用'js'以支持热更新(HMR)
• loaders: 自定义 loader 配置
• styleLoader: style-loader 配置选项
• cssLoader: css-loader 配置选项
• target: 构建目标兼容性配置
• definePlugin: 全局常量定义
• config: 配置钩子函数

#RspackHtmlAppOptions

继承自 RspackAppOptions，用于配置 HTML 应用的特定选项。

#函数导出

#createRspackApp

function createRspackApp(esmx: Esmx, options?: RspackAppOptions): Promise<App>

创建一个标准的 Rspack 应用实例。

参数：

• esmx: Esmx 框架实例
• options: Rspack 应用配置选项

返回值：

• 返回一个 Promise，解析为创建的应用实例

#createRspackHtmlApp

function createRspackHtmlApp(esmx: Esmx, options?: RspackHtmlAppOptions): Promise<App>

创建一个 HTML 类型的 Rspack 应用实例。

参数：

• esmx: Esmx 框架实例
• options: HTML 应用配置选项

返回值：

• 返回一个 Promise，解析为创建的 HTML 应用实例

#常量导出

#RSPACK_LOADER

const RSPACK_LOADER: Record<string, string> = {
  builtinSwcLoader: 'builtin:swc-loader',
  lightningcssLoader: 'builtin:lightningcss-loader',
  styleLoader: 'style-loader',
  cssLoader: 'css-loader',
  lessLoader: 'less-loader',
  styleResourcesLoader: 'style-resources-loader',
  workerRspackLoader: 'worker-rspack-loader'
}

Rspack 内置的 loader 标识符映射对象，提供了常用的 loader 名称常量：

• builtinSwcLoader: Rspack 内置的 SWC loader，用于处理 TypeScript/JavaScript 文件
• lightningcssLoader: Rspack 内置的 lightningcss loader，用于处理 CSS 文件的高性能编译器
• styleLoader: 用于将 CSS 注入到 DOM 中的 loader
• cssLoader: 用于解析 CSS 文件和处理 CSS 模块化的 loader
• lessLoader: 用于将 Less 文件编译为 CSS 的 loader
• styleResourcesLoader: 用于自动导入全局样式资源（如变量、mixins）的 loader
• workerRspackLoader: 用于处理 Web Worker 文件的 loader

使用这些常量可以在配置中引用内置的 loader，避免手动输入字符串：

import { RSPACK_LOADER } from '@esmx/rspack';

export default {
  async devApp(esmx) {
    return import('@esmx/rspack').then((m) =>
      m.createRspackHtmlApp(esmx, {
        loaders: {
          // 使用常量引用 loader
          styleLoader: RSPACK_LOADER.styleLoader,
          cssLoader: RSPACK_LOADER.cssLoader,
          lightningcssLoader: RSPACK_LOADER.lightningcssLoader
        }
      })
    );
  }
};

注意事项：

• 这些 loader 已经内置在 Rspack 中，无需额外安装
• 在自定义 loader 配置时，可以使用这些常量来替换默认的 loader 实现
• 某些 loader（如 builtinSwcLoader）有特定的配置选项，请参考相应的配置文档

#模块导出

#rspack

重导出 @rspack/core 包的所有内容，提供完整的 Rspack 核心功能。