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

NKTDYD

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版本。 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(), { 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(() => { const { nickname = '', mobile = '' } = props.user || {}; const suffixAfter = `${mobile}`.slice(-4); return { ...props, font: { color: defaultColor, ...props.font }, content: `${nickname} ${suffixAfter}` }; }); .water-mark { box-sizing: border-box; width: 100%; height: 100%; } ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240926/f162818844dd90b85c4c0641f8ae789d.png) 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 }) ] });

阅读量:140

点赞量:0

问AI
"rollup-plugin-vue" 替换为 "@vitejs/plugin-vue"(先安装) 试试 - import vuePlugin from 'rollup-plugin-vue'; + import vuePlugin from '@vitejs/plugin-vue'