Modern.js Module
指南
API
插件
指南
API
插件
简体中文

Vue 插件

Vue 插件提供了对 Vue 3 组件构建的支持，插件内部集成了 esbuild-plugin-vue3 和 @vue/babel-plugin-jsx。

WARNING

请注意，此插件仍有一些用法限制：

  1. 目前此插件的实现是直接集成社区插件，因此不支持在 sfc 里写 jsx/tsx。
  2. 如果要为组件生成 d.ts，请使用官方推荐方式 vue-tsc。
  3. 仅支持打包场景，推荐将 input 设置为 ['src/**/*.vue'] 或者 ['src/index.ts']。

快速开始

安装

npm
yarn
pnpm
bun
npm add @modern-js/plugin-module-vue -D

注册插件

在 Modern.js Module 中，你可以按照如下方式注册插件：

import { moduleTools, defineConfig } from '@modern-js/module-tools';
import { modulePluginVue } from '@modern-js/plugin-module-vue';

export default defineConfig({
  plugins: [moduleTools(), modulePluginVue()],
  buildType: 'bundle',
  format: 'esm',
  input: ['src/index.vue'],
  dts: false,
});

配置

vueJsxPluginOptions

  • Type:
type VueJSXPluginOptions = {
  /** transform `on: { click: xx }` to `onClick: xxx` */
  transformOn?: boolean;
  /** enable optimization or not. */
  optimize?: boolean;
  /** merge static and dynamic class / style attributes / onXXX handlers */
  mergeProps?: boolean;
  /** configuring custom elements */
  isCustomElement?: (tag: string) => boolean;
  /** enable object slots syntax */
  enableObjectSlots?: boolean;
  /** Replace the function used when compiling JSX expressions */
  pragma?: string;
};
  • Default: {}

传递给 @vue/babel-plugin-jsx 的选项，请查阅 @vue/babel-plugin-jsx 文档 来了解具体用法。