使用 Rollup 打包 Vue3 + TypeScript 组件库时遇到 '@vue/compiler-sfc' 报错如何解决？

Question

rollup 打包vue3 + ts 组件库报错
[@vue/compiler-sfc] No fs option provided to compileScript in non-Node environment. File system access is required for resolving imported types.

重新安装依赖，更换rollup-plugin-vue版本。

<script lang="ts" setup>
import { computed, withDefaults } from 'vue';
import { Watermark, type WatermarkProps } from 'ant-design-vue';

defineOptions({ name: 'WaterMarkComp' });

const defaultColor = 'rgba(0, 0, 0, .08)';

// rollup 打包报错
const props = withDefaults(defineProps<WatermarkProps & { nickname?: string; mobile?: string }>(), {
  gap: () => [50, 80],
  rotate: -20,
  font: () => ({
    color: defaultColor,
    fontSize: 20
  }),
  user: () => ({ nickname: '', mobile: ''})
});

// rollup 正确运行
// const props = defineProps({
//   gap: {
//     type: Object,
//     default: () => [50, 80]
//   },
//   rotate: {
//     type: Number,
//     default: -20
//   },
//   font: () => ({
//     color: defaultColor,
//     fontSize: 20,
//   }),
//   user: {
//     type: Object,
//     default: () => ({ nickname: '', mobile: ''})
//   }
// });


const defaultPrams = computed<any>(() => {
  const { nickname = '', mobile = '' } = props.user || {};
  const suffixAfter = `${mobile}`.slice(-4);
  return {
    ...props,
    font: {
      color: defaultColor,
      ...props.font
    },
    content: `${nickname} ${suffixAfter}`
  };
});
</script>

<template>
  <Watermark class="water-mark" v-bind="{ ...defaultPrams, ...$attrs }">
    <slot />
  </Watermark>
</template>

<style scoped>
.water-mark {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
</style>

rollup 配置

import { defineConfig } from 'rollup';
import nodeResolve from '@rollup/plugin-node-resolve'; // 找到模块并打包它们
import path from 'path';

import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json'; // 它允许 Rollup 从 JSON 文件中导入数据。
import babel from '@rollup/plugin-babel'; // 它允许 Rollup 从 JSON 文件中导入数据。
import terser from '@rollup/plugin-terser';
import alias from "@rollup/plugin-alias";
import rollUpTypescript from 'rollup-plugin-typescript2';
import progress from 'rollup-plugin-progress';

import postcss from 'rollup-plugin-postcss'
import vuePlugin from 'rollup-plugin-vue';
// import less from 'rollup-plugin-less';
import clear from 'rollup-plugin-clear';
// import css from 'rollup-plugin-css-only';

import packageJson from "./package.json"; // assert { type: "json" };
// const packageJson = require('./package.json');
import { fileURLToPath } from 'url';

// import eslint from "@rollup/plugin-eslint";
// import { getFileList } from './build/file.build.ts';


const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const pathResolve = (p) => path.resolve(__dirname, p);

const extensions = ['.js', '.jsx', '.ts', '.tsx'];
const globalsConfig = {
  'vue': "Vue",
  'lodash-es': 'lodashEs',
  'tyndSchema': 'TyndSchema',
  'ant-design-vue': 'antDesignVue'
};


export default defineConfig({
  input: 'src/index.ts',
  external: ['lodash-es', 'vue', 'ant-design-vue'], // 依赖模块
  output: [
    {
      // dir: 'dist',
      file: packageJson.main,
      format: 'cjs',
          banner: '/* this is jiangshan webgroup components ' + '1.0.1' + ' */',
          footer: '/* this author is beisir */',
      globals: globalsConfig
      // assetFileNames: '[name]-[hash][extname]',
      // chunkFileNames: '[name]-[hash].js',
      // entryFileNames: 'dist/index-[name].cjs.js'
      // sourcemap: true,
      // exports: 'auto'
    },
    {
      name: 'ui-schema',
      file: packageJson.module,
      format: 'es',
      globals: globalsConfig,
    },
    {
      name: 'ui-schema', // 当入口文件有export时，'umd'格式必须指定name
      file: 'dist/index-umd.js',
      format: 'umd',
      globals: globalsConfig,
    },
    {
      file: 'dist/index-min.js',
      format: 'iife',
      name: 'tyndSchemaMin',
      plugins: [terser()],
      globals: globalsConfig
    }
  ],
  // acornInjectPlugins: [jsx()],
  plugins: [
    clear({
      targets: ['dist'],
      verbose: true,
      before: true
    }),
    rollUpTypescript({
      // check: false
      useTsconfigDeclarationDir: true // 示使用根目录的  文件作为 typescript 编译配置文件
    }),
    // css({ output: 'bundle.css' }),
    // eslint({
    //   throwOnError: true,
    //   include: ['src/**/*.ts'],
    //   exclude: ['node_modules/**', 'lib/**'],
    // }),
    nodeResolve({
      extensions: extensions
    }),
    alias({
      entries: {
        "@": pathResolve("src"),
        _: __dirname,
      },
    }),
    vuePlugin({
      target: 'browser'
    }),
    // less(),
    
    postcss({
      extensions: ['.css', '.less'],
      extract: 'css/index.css',
      // use: ['less'],
      // modules: true
    }),
    commonjs(),
    babel({ // 使用 Babel 将 JSX 和 Flow 转换为 JavaScript
      // babelHelpers: 'runtime',
      babelHelpers: 'bundled',
      extensions: extensions,
      exclude: 'node_modules/**'
    }),
    json(),
    progress({
      clearOnComplete: false
    })
  ]
});

Answer 1

rollup-plugin-vue 替换为 @vitejs/plugin-vue（先安装） 试试

- import vuePlugin from 'rollup-plugin-vue';
+ import vuePlugin from '@vitejs/plugin-vue'