typescript - 使用 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'