我仿照elelment-puls写了一个自己的组件库,在生成类型时报错,所有跟vue相关的导出,都找不到
Module ‘”vue”‘ has no exported member ‘onMounted’.
Module ‘”vue”‘ has no exported member ‘ref’.
Module ‘”vue”‘ has no exported member ‘computed’.
文件代码如下:
import {
projRoot,
pkgRoot,
buildOutput,
excludeFiles,
epRoot
} from '@hfn-components/build-utils'
import {resolve, relative} from "path";
import { Project } from "ts-morph";
import * as vueCompiler from "vue/compiler-sfc";
import glob from "fast-glob";
import {readFileSync} from 'fs'
import type { CompilerOptions, SourceFile } from 'ts-morph'
import consola from 'consola'
const TSCONFIG_PATH = resolve(projRoot,"tsconfig.json")
const outDir = resolve(buildOutput, "types");
export const generateTypesDefinitions = async () => {
const compilerOptions: CompilerOptions = {
emitDeclarationOnly: true,
outDir,
baseUrl: projRoot,
preserveSymlinks: true,
skipLibCheck: true,
noImplicitAny: false,
}
const project = new Project({
compilerOptions,
tsConfigFilePath: TSCONFIG_PATH,
skipAddingFilesFromTsConfig: true,
})
const sourceFiles = await addSourceFiles(project)
consola.success('Added source files')
typeCheck(project)
consola.success('Type check passed!')
await project.emit({
emitOnlyDtsFiles: true,
})
const tasks = sourceFiles.map(async (sourceFile) => {
consola.log(sourceFile.getFilePath())
// const relativePath = relative(pkgRoot, sourceFile.getFilePath())
})
}
// await addSourceFiles(project);
async function addSourceFiles(project:Project) {
project.addSourceFileAtPath(resolve(projRoot, 'typings/env.d.ts'))
const globSourceFile = "**/*.{js?(x),ts?(x),vue}";
console.log('---',globSourceFile)
const filePaths = excludeFiles(
await glob([globSourceFile, '!hfn-components/**/*'], {
cwd: pkgRoot,
absolute: true,
onlyFiles: true,
})
);
const epPaths = excludeFiles(
await glob(globSourceFile, {
cwd: epRoot,
onlyFiles: true,
})
);
console.log("filePaths", filePaths);
console.log("epPaths",epPaths)
const sourceFiles: SourceFile[] = []
await Promise.all([
...filePaths.map((file) => {
if (file.endsWith(".vue")) {
// 处理 .vue 文件
const content = readFileSync(file, "utf-8");
// 初步解析出 template、script、scriptSetup、style 模块
const sfc = vueCompiler.parse(content);
const { script, scriptSetup } = sfc.descriptor;
if (script || scriptSetup) {
console.log()
// ? 可选链操作符
let content = script?.content ?? "";
if (scriptSetup) {
// 如果存在 scriptSetup 则需要通过 compileScript 方法编译
const compiled = vueCompiler.compileScript(sfc.descriptor, {
id: "xxx",
});
content += compiled.content;
}
console.log(content)
// 创建 TypeScript 源文件
const lang = scriptSetup?.lang || script?.lang || "js";
const source = project.createSourceFile(
`${relative(process.cwd(), file)}.${lang}`,
content
);
sourceFiles.push(source)
}
} else {
const source = project.addSourceFileAtPath(file);
sourceFiles.push(source)
}
}),
...epPaths.map(async (file) => {
const content = readFileSync(resolve(epRoot, file), "utf-8");
sourceFiles.push(project.createSourceFile(resolve(pkgRoot, file), content))
}),
]);
return sourceFiles
}
function typeCheck (project: Project){
const diagnostics = project.getPreEmitDiagnostics()
if (diagnostics.length > 0) {
consola.error(project.formatDiagnosticsWithColorAndContext(diagnostics))
const err = new Error('Failed to generate dts.')
consola.error(err)
throw err
}
}
我的vue文件使用的是setup语法糖,版本为3.4.29
compilerOptions配置中,如果设置 preserveSymlinks: true,会找不到vue相关的任何东西,
假如我安装@vue/runtime-core依赖,从本依赖导出就正常,假设从@vue/runtime-core依赖中导出ref就不会有这个报错
New contributor
biluo li is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.