我正试图用我的组件制作一个库/包。
技术堆栈是：React，Typescript。。。以及一堆其他依赖关系。
我正在使用Rollup，当我试图构建包时，我得到了以下错误：
[！]错误："DisplayHint"未由导出../node_modules/@bestowinc/enroll-sdk-core/build/lib/question-common.js，导入者/src/utils/answerTypeConversations.tshttps://rollupjs.org/guide/en/#error-模块未导出名称
汇总：
import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import external from 'rollup-plugin-peer-deps-external';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import reactSvg from 'rollup-plugin-react-svg';
import typescript from 'rollup-plugin-typescript2';
import svg from 'rollup-plugin-svg';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import replace from '@rollup/plugin-replace';
import urlResolve from 'rollup-plugin-url-resolve';
export default [
{
input: './src/index.ts',
output: [
{
file: './dist/index.js',
format: 'cjs',
sourcemap: true,
},
{
file: './dist/index.es.ts',
format: 'es',
exports: 'named',
sourcemap: true,
},
],
plugins: [
typescript({
tsconfig: './tsconfig.build.json',
verbosity: 3,
clean: true,
check: true,
}),
babel({
exclude: ['/node_modules'],
presets: [
'@babel/preset-react',
'@babel/preset-flow',
'@babel/preset-env',
],
extensions: ['.ts', '.tsx'],
}),
commonjs({
include: './node_modules',
dynamicRequireTargets: [
// include using a glob pattern (either a string or an array of strings)
'/node_modules/@bestowinc/enroll-sdk-core/build/lib/question-common.js',
'./node_modules/@bestowinc/enroll-sdk-core/build/lib/question-common.js',
],
}),
resolve({
browser: true,
preferBuiltins: true,
mainFields: ['browser'],
}),
urlResolve(),
postcss({
plugins: [],
minimize: true,
}),
external(),
terser(),
reactSvg({
jsx: false,
include: ['custom.d.ts'],
exclude: null,
}),
svg(),
replace({
include: ['../src/icons/**'],
preventAssignment: true,
// Replace ReactComponent to allow resolution of SVG files under Rollup
ReactComponent: 'default',
}),
json(),
],
},
];
显示提示：
/**
* An indication of how clients should display a question.
*
* This is inferred from the answer_format and answer_display api properties.
* Those properties should not be used directly, and clients should rely instead
* solely on DisplayHint.
*/
export declare const DisplayHint: {
readonly ButtonGroup: "DisplayHint::ButtonGroup";
readonly Checkbox: "DisplayHint::Checkbox";
};
export declare type DisplayHint = typeof DisplayHint[keyof typeof DisplayHint];
看起来DisplayHint是TS类型/接口，而不是导出的JS值。
Rollup本身是一个bundler，而不是TS语言分析器。它无法判断命名导出是一个具体的JS值，还是仅仅是一个不存在的TS类型，因此报告了错误。
汇总插件顺序很重要。要解决这个特定的问题，只需按顺序提升typescript插件，至少在babel之前。TS插件，如果首先投入使用，将正确地从JS代码输出中删除TS类型。
更新
我知道另一个技巧，但这是一个变通方法。诀窍是使用import type语法将DisplayHint显式标记为TS类型。
import type { DisplayHint } from "@bestowinc/enroll-sdk-core"
import { otherNonTypeStuff } from "@bestowinc/enroll-sdk-core"
这种技巧并不令人满意，因为它要求您在需要TS类型的任何地方都显式标记，并且必须将具体的JS导出与TS类型导出分开，如上所示。如果这是一次性的，这很好，但如果你有一个大的代码库，那就非常乏味了。
我必须补充一点，我没想到原来的解决方案不起作用。我的猜测是这个模块@bestowinc/enroll-sdk-core有点古怪。(为什么在配置中包含它们作为动态导入目标？(
这是一个带有.d.ts注释的JS模块，我可以判断，但看起来它是一个私有模块，我看不到代码，因此无法深入了解。我的猜测是.d.ts声明被破坏了，它与JS代码的实际导出不匹配。
不管怎样，我希望这个把戏能解决你的问题。如果你需要我仔细观察，我必须请你设置一个最小的可复制示例。根据目前的信息，我无能为力。
我刚刚在链接库(使用typescript插件(中遇到过类似的问题，在我的情况下，解决方案是将链接库添加到配置"外部"属性。但是node_modules无论如何都应该被视为外部的，所以不确定这是否会应用