关于Vue3+rollup打包组件库环境报错？

Question

我用pnpm的workspace搭建了一个项目，这个项目中其中有一个package是使用的rollup打包的一个组件库环境，这个组件库只包含组件部分不包含文档。
这个项目是可以运行的，但是如果在**.vue文件中使用script setup语法的话，name属性没有办法添加。

于是我使用两个script标签一个用于script setup，一个用于 defineComponent 输出名称：

<script lang="ts" setup>
// 组件逻辑代码
</script>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "GSplitPane"
});
</script>

但是如果这样写的话就会抛出一个错误：

我尝试使用 vite-plugin-vue-setup-extend 插件可以在setup上添加name，但是在rollup.config.mjs中添加了插件配置貌似没有生效。rollup.config.mjs配置如下：

import { defineConfig } from "rollup";
import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import ts from "rollup-plugin-typescript2";
import vue from "@vitejs/plugin-vue";
import jsx from "@vitejs/plugin-vue-jsx";
import json from "@rollup/plugin-json";
import commonjs from "@rollup/plugin-commonjs";
import { terser } from "rollup-plugin-terser";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import vueSetupExtend from "vite-plugin-vue-setup-extend";

import pkg from "./package.json" assert { type: "json" };
const createBanner = () => {
  return `/*!
  * ${pkg.name} v${pkg.version}
  * (c) ${new Date().getFullYear()} ${pkg.author}
  * @license ${pkg.license}
  */`;
};

export default defineConfig({
  input: "./src/index.ts",
  output: [
    {
      banner: createBanner(),
      file: "dist/index.js",
      format: "cjs"
    },
    {
      banner: createBanner(),
      file: "dist/index.esm.js",
      format: "esm",
      exports: "named"
    },
    {
      banner: createBanner(),
      file: "dist/index.umd.js",
      format: "umd",
      name: "w"
    }
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    ts(),
    vue(),
    vueSetupExtend(),
    json(),
    commonjs(),
    jsx(),
    babel({
      exclude: "node_modules/**",
      presets: ["@vue/babel-preset-jsx"],
      babelHelpers: "bundled"
    }),
    terser(),
    postcss()
  ],
  external: ["Vue", "element-plus"]
});

组件库的package.json

整体项目的package.json 插件如下：

{
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/preset-env": "^7.21.4",
    "@rollup/plugin-alias": "^5.0.0",
    "@rollup/plugin-babel": "^6.0.3",
    "@rollup/plugin-commonjs": "^24.1.0",
    "@rollup/plugin-json": "^6.0.0",
    "@rollup/plugin-node-resolve": "^15.0.2",
    "@types/mockjs": "^1.0.7",
    "@types/node": "^18.15.11",
    "@typescript-eslint/eslint-plugin": "^5.58.0",
    "@vicons/antd": "^0.12.0",
    "@vicons/carbon": "^0.12.0",
    "@vitejs/plugin-vue": "^4.1.0",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "@vue/babel-preset-jsx": "^1.4.0",
    "@vue/compiler-sfc": "^3.2.47",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vueuse/core": "^10.0.2",
    "autoprefixer": "^10.4.14",
    "babel": "^6.23.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-preset-env": "^1.7.0",
    "chalk": "^5.2.0",
    "eslint": "^8.38.0",
    "eslint-formatter-pretty": "^5.0.0",
    "eslint-plugin-json": "^3.1.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.10.0",
    "execa": "^7.1.1",
    "mockjs": "^1.1.0",
    "postcss": "^8.4.21",
    "prettier": "^2.8.7",
    "reset-css": "^5.0.1",
    "rollup": "^3.20.2",
    "rollup-plugin-copy": "^3.4.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-scss": "^4.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.34.1",
    "rollup-plugin-visualizer": "^5.9.0",
    "sass": "^1.62.0",
    "sass-loader": "^10.4.1",
    "tailwindcss": "^3.3.1",
    "typescript": "^5.0.4",
    "v3-tour": "^3.1.2",
    "vite": "^4.1.0",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-imagemin": "^0.6.1",
    "vite-plugin-mock": "^2.9.8",
    "vite-plugin-vue-setup-extend": "^0.4.0",
    "vue": "3.2.45",
    "vue-router": "^4.1.6",
    "yorkie": "^2.0.0"
  },
  "dependencies": {
    "animate.css": "^4.1.1",
    "await-to-js": "^3.0.0",
    "axios": "^1.3.5",
    "echarts": "^5.4.2",
    "element-plus": "^2.3.3",
    "exceljs": "^4.3.0",
    "hover.css": "^2.3.2",
    "nanoid": "^4.0.2",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.34",
    "resize-observer-polyfill": "^1.5.1",
    "sortablejs": "^1.15.0",
    "splitpanes": "^3.1.5",
    "vue-i18n": "^9.2.2",
    "vue3-grid-layout": "^1.0.0"
  }
}

Answer 1

没这么搞过，不过目测是 TS 没识别。

你可以试着调换一下 rollup-plugin-typescript2 和 @vitejs/plugin-vue 两个插件的顺序看看。另外其实 @vitejs/plugin-vue 已经内置了 TS 编译器，不需要再单独再走一遍 TS 的，不知道你这里的为什么要这么用（难道是有单独的 TS 模块也需要导出？）。

P.S. 如果项目允许，可以直接升级到 Vue 3.3 的。此版本中新加入了 defineOptions 宏这个语法糖，已经可以直接在 script setup 里定义 name 了。