Skip to content

Latest commit

 

History

History
147 lines (121 loc) · 4.53 KB

README.zh-CN.md

File metadata and controls

147 lines (121 loc) · 4.53 KB
Raw

vue-rsloader - Vue loader for Rspack

在线 Demo
Fork version of vue-loader for Rspack

English | 简体中文

Warning: JUST FOR FUN, NOT FOR PRODUCTION.

Why This

由于 Rspack 还不支持 functional rule condition 和 loader pitch，这个插件使用 Regex 来生成克隆规则和注入相关的 css loader。

Features

主要继承自 vue-loader

  • 🗂 单文件组件

  • 🔥 在开发过程中保持状态的热重载。(HMR)

  • 🎨 将 <style> 和 <template> 中引用的静态资产视为模块依赖，并用 rspack loader 处理它们。

  • ✅ 为每个组件 Simulate scoped CSS

  • 🦾 <template>中的 TypeScript

Install

就像使用 vue-loader 一样，安装然后把它添加到你的 rspack 配置中

pnpm i -D vue-rsloader

Rspack Configuration

// rspack.config.js
const { VueLoaderPlugin } = require('vue-rsloader')

module.exports = {
  module: {
    rules: [
      // ... 其他规则
      {
        test: /\.vue$/,
        use: [
          {
            loader: require.resolve('vue-rsloader'),
            /** @type {import('vue-rsloader').VueLoaderOptions} */
            options: {
              // 在后文有 options 参考
            },
          },
        ],
      },
      // 因为rspack在内部处理ts、css 我们不需要 ts-loader，css-loader 这样的 loader
    ],
  },
  plugins: [
    // 确保包含插件！
    new VueLoaderPlugin(),
  ],
}

Example

Options

export interface VueLoaderOptions {
  /** https://babeljs.io/docs/en/next/babel-parser#plugins */
  babelParserPlugins?: SFCScriptCompileOptions['babelParserPlugins']
  /**
   * 配置要转换为资产URL导入的标签/属性，或者使用 “false” 完全禁用转换。
   * @default true
   */
  transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
  /**
   * 使用自定义的 compiler-sfc 实例。可用于强制指定版本。
   */
  compiler?: TemplateCompiler
  /** 传递给 vue/compiler-sfc 的选项 */
  compilerOptions?: CompilerOptions
  /**
   * 启用Vue响应式转换（实验性）。
   * https://vuejs.org/guide/extras/reactivity-transform.html
   * - `true`：将启用所有 vue [js(x)，ts(x) wip] 文件的转换，除了 node_modules 中的文件。
   * - `false`：在所有情况下禁用。
   *
   * @default false
   */
  reactivityTransform?: boolean
  /**
   * 将 Vue SFC 转换为custom elements
   * - `true`：所有`*.vue`导入都将被转换为custom elements
   * - `RegExp`：匹配的文件将被转换为custom elements
   *
   * @default /\.ce\.vue$/
   */
  customElement?: boolean | RegExp

  /**
   * @default: 在开发模式下为 true，在生产模式下或 rspack config target: 'node' 时为false。
   * 允许的值：false（true不会强制热重载，无论是在生产模式还是当目标为'node'时）
   */
  hotReload?: boolean
  /**
   * 在开发环境中，vue-loader 为组件注入 __file 属性以提供更好的调试体验。如果组件缺少 name 属性
   * 则 Vue 将从 __file 字段推断出名称以在控制台警告中显示。默认情况下，在生产构建中会剥离此属性。
   * 但是，如果您正在开发一个组件库并且不想在每个组件中指定名称，则可能希望保留它。
   * @default false
   */
  exposeFilename?: boolean
  /**
   * not use
   */
  appendExtension?: boolean
  /**
   * Template 是否需要生成或者识别 ts 代码
   * @default: 当 lang=tsx? 为true时，其他情况为false
   */
  enableTsInTemplate?: boolean

  /**
   * templateOptions.ssr
   * @default false
   */
  isServerBuild?: boolean
}