Rollup + Typescript + 将图像加载为 base64

Ant*_*yak 5 rollup typescript rollupjs

尝试使用 Rollup 预加载图像时遇到问题。所有应该起作用的废话却不起作用,不知道为什么。有人设法让它发挥作用吗?这是我在 rollup.congig.js 中的内容:

import image from 'rollup-plugin-image'
...
plugins: [
        image(),
        json(),
        resolve(),
        commonjs(),
        typescript({
            typescript: require('typescript'),
        }),
        (process.env.BUILD === 'production' ? terser() : {})
Run Code Online (Sandbox Code Playgroud)

这是我在来源中得到的内容:

import CAR_IMAGE from "../resources/expand.png";
Run Code Online (Sandbox Code Playgroud)

最后我从 rtp2 插入中收到一个错误,其中显示:

语义错误 TS 2307,找不到模块“../resources/expand.png”

奇怪的是,我在其他各种用于汇总的图像加载插件中也得到了同样的结果。路径是正确的,图像就在那里。我已经被这个错误搞疯了=((

更新:这里是可重现此错误的存储库:

https://github.com/AntonPilyak/rollup-image-bug

更新 2:产生了错误:

https://github.com/rollup/rollup-plugin-url/issues/22

https://github.com/alwaysonlinetxm/rollup-plugin-img/issues/5

https://github.com/rollup/rollup-plugin-image/issues/10

怎么可以这么蹩脚?=(((

小智 5

rollup-plugin-image包替换为 rollup.config.js 中的此
并在插件中添加如下类似的内容

plugins: [
image({
  extensions: /\.(png|jpg|jpeg|gif|svg)$/,
  limit: 10000
}),........
Run Code Online (Sandbox Code Playgroud)

declaration.d.ts然后在根项目中创建一个文件名。添加以下片段

declare module '*.png' {
    const value: any;
    export default value;
}
Run Code Online (Sandbox Code Playgroud)

将此片段添加到您的tsconfig.json中

"include": ["src","src/declaration.d.ts"],
Run Code Online (Sandbox Code Playgroud)

在 CLI 中重新运行汇总。会起作用的!!

  • 我发现您仍然可以使用 rollup-plugin-image 包,只需创建declaration.d.ts 并按照您的指示更新 tsconfig.json 即可。无需使用 5 年未更新的软件包(截至本文) (2认同)