webpack 在TypeScript项目中导入Canvg v4

hfwmuf9z  于 11个月前  发布在  Webpack
关注(0)|答案(1)|浏览(144)

我有一个旧的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工作得很好。
有什么办法能让我脱身吗?谢谢!

8iwquhpp

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();

相关问题