webpack 在TypeScript项目中导入Canvg v4

hfwmuf9z 于 2024-01-08 发布在 Webpack

关注(0)|答案(1)|浏览(181)

我有一个旧的TypeScript项目，具有以下tsconfig：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es7", "dom"],
    ...

字符串
当我定期导入它（即import { Canvg } from 'canvg';）时，编译器会抱怨库中的ES6语法：

Failed to compile.
./node_modules/canvg/dist/index.js
Module parse failed: Unexpected token (3822:16)
You may need an appropriate loader to handle this file type.
|             const dyY = Math.cos(-rotation) * dy;
|             segment.p0 = {
|                 ...p0,
|                 x: p0.x + dyX,
|                 y: p0.y + dyY

型
我试图将库作为静态文件独立导入，但我只能找到v3，并且无法为我需要的文件工作，而latest v4 demo工作得很好。
有什么办法能让我脱身吗？谢谢！

webpack

来源：https://stackoverflow.com/questions/77578534/import-canvg-v4-in-typescript-project

1条答案

按热度按时间

8iwquhpp1#

我最终使用这个Webpack配置生成了v4单个bundle文件：

const path = require('path');
module.exports = {
  entry: './index.js', // Adjust this path to your module's entry point
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'canvg.js',
    library: 'Canvg', // This is the name you'll use to access the module from the window object
    libraryTarget: 'window',
  },
};

字符串
并公开了我需要的函数：

import { Canvg } from 'canvg';
export const fromString = Canvg.fromString;

型
另外，v3对我不起作用的原因是我没有在从画布中提取图像之前等待渲染。

await v.render();

型

展开查看全部

赞(0）回复(0）举报 2024-01-08

我来回答

webpack 在TypeScript项目中导入Canvg v4

1条答案

相关问题

热门标签

最新问答