为什么 SVGR 不在我的 esbuild 配置中生成 TypeScript 声明文件？
Why does SVGR not generate a TypeScript declaration file in my esbuild configuration?
我正在用 TypeScript 创建一个 SVG 图标库。到目前为止，SVGR 非常棒，但我需要的最后一部分是允许将 title 和 ref 传递给捆绑组件的生成类型。
复制
我不确定所有内容可能对您有所帮助，因此我将包含一个存储库和一些代码示例。但是通过以下设置，svgr 从 SVG 导入创建组件，但没有生成任何类型。结果，每当我尝试使用这个包中的图标时，我都会被警告找不到它的声明文件。
POC 回购：https://github.com/yuschick/icon-demo
src/index.ts
export { default as TestIcon } from "./svg/test.svg";
export { default as ArrowThinLeft } from './svg/arrow-thin-left.svg';
package.json
{
"module": "dist/index.js",
"types": "dist/index.d.ts",
"type": "module",
"scripts": {
"build": "node esbuild.config.js",
},
"devDependencies": {
"esbuild": "^0.14.39",
"esbuild-plugin-svgr": "^1.0.1",
"typescript": "^4.6.3"
}
}
esbuild.config.js
import esbuild from "esbuild";
import svgr from "esbuild-plugin-svgr";
esbuild.build({
bundle: true,
entryPoints: ["src/index.ts"],
external: ["react"],
format: "esm",
// minify: true,
outfile: "dist/index.js",
plugins: [svgr({ titleProp: true, ref: true, expandProps: false, typescript: true })],
})
.catch(() => process.exit(1));
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"alwaysStrict": true,
"baseUrl": "src",
"checkJs": true,
"declaration": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"lib": ["dom", "dom.iterable", "esnext"],
"module": "esnext",
"moduleResolution": "node",
"noEmit": true,
"outDir": "dist",
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": true,
"target": "esnext"
},
"include": ["src", "global.d.ts"]
}
global.d.ts
declare module '*.svg' {
const content: string;
export default content;
}
预期行为
通过将 typescript: true 传递到 svgr 选项，我希望根据生成的组件生成 index.d.tsx 文件。
根据 SVGR 文档：
Generates .tsx files with TypeScript typings.
注意：当我将 SVGR 与 ESBuild 一起使用时，在尝试使用 Rollup 时也存在同样的问题。
问题
By passing typescript: true into the svgr options, I am expecting a index.d.tsx file to be generated based on the generated components.
这个预期是不正确的。如果您指定 typescript 选项而不是 .d.ts 文件，SVGR 将只生成 .tsx 文件。来自 documentation（您也找到了）：
TypeScript
Generates .tsx files with TypeScript typings.
但是，即使指定了此选项，SVGR 也不会生成 .tsx 文件，因为您在 esbuild 插件中使用它。 esbuild-plugin-svgr 在底层利用了 @svgr/core 中的 transform 函数（参见 esbuild-plugin-svgr/index.js:L4). The transform function only transforms the SVG to JSX or TSX but never writes the output(s). @svgr/cli handles writing the output(s) to file(s), for example see @svgr/cli/src/dirCommand.ts.
解决方案
我想你有两个选择：
从esbuild中分离出SVGR，然后生成一个.d.ts文件
换句话说，停止使用 esbuild-plugin-svgr 并改用 @svgr/cli。然后，您必须在 esbuild 之前 运行 SVGR；无论是手动、在脚本中链接命令还是使用 npm's pre-script hook. Afterwards you'll have to generate a .d.ts file. Although, looking at esbuild#95，它似乎都不受开箱即用的支持。您可能想探索那里列出的建议，包括：
- 使用 TypeScript 编译器生成声明文件(
tsc --emitDeclarationOnly)
- 使用插件，例如
esbuild-plugin-d.ts
您的构建链最后可能如下所示：
- 使用
@svgr/cli 从 SVG 生成 .tsx 文件。
- 使用 esbuild 捆绑。
- 生成
.d.ts 文件，可以使用 tsc 作为单独的步骤，也可以使用 esbuild 插件与上述步骤合并。
从您的 JavaScript 包中生成一个 .d.ts 文件
如果出于某种原因您真的想保留当前的构建配置，您可以使用 tsc dist/index.js --declaration --allowJs --emitDeclarationOnly 从 JavaScript 捆绑文件生成一个 .d.ts 文件（参见 TypeScript documentation ).警告是 TypeScript 可能无法推断所有类型，因此您的类型声明文件可能不完整。
我正在用 TypeScript 创建一个 SVG 图标库。到目前为止，SVGR 非常棒，但我需要的最后一部分是允许将 title 和 ref 传递给捆绑组件的生成类型。
复制
我不确定所有内容可能对您有所帮助，因此我将包含一个存储库和一些代码示例。但是通过以下设置，svgr 从 SVG 导入创建组件，但没有生成任何类型。结果，每当我尝试使用这个包中的图标时，我都会被警告找不到它的声明文件。
POC 回购：https://github.com/yuschick/icon-demo
src/index.ts
export { default as TestIcon } from "./svg/test.svg";
export { default as ArrowThinLeft } from './svg/arrow-thin-left.svg';
package.json
{
"module": "dist/index.js",
"types": "dist/index.d.ts",
"type": "module",
"scripts": {
"build": "node esbuild.config.js",
},
"devDependencies": {
"esbuild": "^0.14.39",
"esbuild-plugin-svgr": "^1.0.1",
"typescript": "^4.6.3"
}
}
esbuild.config.js
import esbuild from "esbuild";
import svgr from "esbuild-plugin-svgr";
esbuild.build({
bundle: true,
entryPoints: ["src/index.ts"],
external: ["react"],
format: "esm",
// minify: true,
outfile: "dist/index.js",
plugins: [svgr({ titleProp: true, ref: true, expandProps: false, typescript: true })],
})
.catch(() => process.exit(1));
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"alwaysStrict": true,
"baseUrl": "src",
"checkJs": true,
"declaration": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"lib": ["dom", "dom.iterable", "esnext"],
"module": "esnext",
"moduleResolution": "node",
"noEmit": true,
"outDir": "dist",
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": true,
"target": "esnext"
},
"include": ["src", "global.d.ts"]
}
global.d.ts
declare module '*.svg' {
const content: string;
export default content;
}
预期行为
通过将 typescript: true 传递到 svgr 选项，我希望根据生成的组件生成 index.d.tsx 文件。
根据 SVGR 文档：
Generates .tsx files with TypeScript typings.
注意：当我将 SVGR 与 ESBuild 一起使用时，在尝试使用 Rollup 时也存在同样的问题。
问题
By passing
typescript: trueinto thesvgroptions, I am expecting aindex.d.tsxfile to be generated based on the generated components.
这个预期是不正确的。如果您指定 typescript 选项而不是 .d.ts 文件，SVGR 将只生成 .tsx 文件。来自 documentation（您也找到了）：
TypeScript
Generates
.tsxfiles with TypeScript typings.
但是，即使指定了此选项，SVGR 也不会生成 .tsx 文件，因为您在 esbuild 插件中使用它。 esbuild-plugin-svgr 在底层利用了 @svgr/core 中的 transform 函数（参见 esbuild-plugin-svgr/index.js:L4). The transform function only transforms the SVG to JSX or TSX but never writes the output(s). @svgr/cli handles writing the output(s) to file(s), for example see @svgr/cli/src/dirCommand.ts.
解决方案
我想你有两个选择：
从esbuild中分离出SVGR，然后生成一个.d.ts文件
换句话说，停止使用 esbuild-plugin-svgr 并改用 @svgr/cli。然后，您必须在 esbuild 之前 运行 SVGR；无论是手动、在脚本中链接命令还是使用 npm's pre-script hook. Afterwards you'll have to generate a .d.ts file. Although, looking at esbuild#95，它似乎都不受开箱即用的支持。您可能想探索那里列出的建议，包括：
- 使用 TypeScript 编译器生成声明文件(
tsc --emitDeclarationOnly) - 使用插件，例如
esbuild-plugin-d.ts
您的构建链最后可能如下所示：
- 使用
@svgr/cli从 SVG 生成.tsx文件。 - 使用 esbuild 捆绑。
- 生成
.d.ts文件，可以使用tsc作为单独的步骤，也可以使用 esbuild 插件与上述步骤合并。
从您的 JavaScript 包中生成一个 .d.ts 文件
如果出于某种原因您真的想保留当前的构建配置，您可以使用 tsc dist/index.js --declaration --allowJs --emitDeclarationOnly 从 JavaScript 捆绑文件生成一个 .d.ts 文件（参见 TypeScript documentation ).警告是 TypeScript 可能无法推断所有类型，因此您的类型声明文件可能不完整。