Snap.svg在Vite环境下报错，如何正确引入Snap.svg？

Question

怎么在vite项目中使用snapsvg，使用每次都会报'eve is not defined',按官方Github在WebPack项目中通过imports-loader使用则没这个问题。
Github地址： https://github.com/adobe-webplatform/Snap.svg
有大神知道怎么解决吗

搜索相关的信息都没有找到相关的解决方法，希望在Vite项目也能正常使用snapsvg

Answer 1

在 Vite 项目中使用 Snap.svg 时遇到 eve is not defined 错误，是因为 Snap.svg 依赖于 eve 库，而 Vite 的处理方式与 Webpack 不同。以下是一些解决方案：

1. 使用 snapsvg-cjs

这是一个 CommonJS 版本的 Snap.svg，可以更好地与现代打包工具兼容。

安装：

npm install snapsvg-cjs

在代码中导入：

import Snap from 'snapsvg-cjs';

2. 配置 Vite

可以在 vite.config.js 中配置 define 选项来解决这个问题：

import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    'window.eve': 'window.eve || {}'
  }
});

3. 使用 vite-plugin-require-transform

虽然 Vite 默认不支持 Webpack 的 imports-loader，但可以使用 vite-plugin-require-transform 插件来实现类似的功能。

安装：

npm install vite-plugin-require-transform --save-dev

配置 vite.config.js：

import { defineConfig } from 'vite';
import requireTransform from 'vite-plugin-require-transform';

export default defineConfig({
  plugins: [
    requireTransform({
      fileRegex: /.js$|.jsx$|.ts$|.tsx$/,
    }),
  ],
});