如何让自定义SVG.js模块同时兼容Node.js与React应用？

问题背景 #

开发了基于SVG.js的SVG生成模块，需要同时在Node.js和React环境中使用：

• React环境：直接调用SVG()即可创建SVG对象
• Node.js环境：需借助svgdom模拟DOM，初始化代码如下：

const window = exports.createSVGWindow();
const document = window.document;
registerWindow(window, document);
this.draw = SVG(document.documentElement);

但在React中引入svgdom后，编译会报错：

Module not found: Error: Can't resolve 'fs' in ...

尝试用动态导入区分环境，但未能成功设置this.draw，尝试代码如下：

if ( typeof process !== "undefined" &&
     process.release.name.search(/node|io.js/) !== -1) {
      // script is running in Node.js
      const createDOM = async function () {
        let exports = await import("svgdom");

        const window = exports.createSVGWindow();
        const document = window.document;
        registerWindow(window, document);
        this.draw = SVG(document.documentElement);
      };

      createDOM();
} else {
  // script is not running in Node.js
  this.draw = SVG();
}

最佳实践方案 #

方案1：拆分环境专属入口文件 #

将模块拆分为通用核心逻辑+两个环境专属入口，彻底隔离依赖：

1. 核心模块（如svg-generator-core.js）：仅编写SVG生成的业务逻辑，依赖外部传入的draw实例

export class SVGGenerator {
  constructor(draw) {
    this.draw = draw;
    // 此处编写你的SVG生成逻辑
  }

  generateCircle() {
    this.draw.circle(100).fill('red');
  }
}

2. Node.js入口（svg-generator-node.js）：负责初始化svgdom并传入核心模块

import { SVGGenerator } from './svg-generator-core.js';
import { createSVGWindow } from 'svgdom';
import { registerWindow, SVG } from '@svgdotjs/svg.js';

const window = createSVGWindow();
const document = window.document;
registerWindow(window, document);
const draw = SVG(document.documentElement);

export const createSVGGenerator = () => new SVGGenerator(draw);

3. React/浏览器入口（svg-generator-browser.js）：直接初始化SVG实例传入核心模块

import { SVGGenerator } from './svg-generator-core.js';
import { SVG } from '@svgdotjs/svg.js';

const draw = SVG();
export const createSVGGenerator = () => new SVGGenerator(draw);

使用时，Node.js项目引入svg-generator-node.js，React项目引入svg-generator-browser.js即可。

方案2：修复动态导入的this指向与异步问题 #

如果不想拆分文件，修改动态导入代码，解决this指向错误与异步初始化问题：

class SVGGenerator {
  constructor() {
    this.init();
  }

  async init() {
    // 更可靠的Node.js环境判断
    if (typeof process !== "undefined" && process.release?.name?.match(/node|io.js/)) {
      // Node.js环境异步加载依赖
      const { createSVGWindow } = await import("svgdom");
      const { registerWindow, SVG } = await import("@svgdotjs/svg.js");

      const window = createSVGWindow();
      const document = window.document;
      registerWindow(window, document);
      this.draw = SVG(document.documentElement);
    } else {
      // 浏览器/React环境异步加载依赖
      const { SVG } = await import("@svgdotjs/svg.js");
      this.draw = SVG();
    }
    // 所有依赖this.draw的逻辑需放在初始化完成后调用
    this.startGenerate();
  }

  startGenerate() {
    // 此处编写依赖this.draw的业务逻辑
    this.draw.circle(50).fill('blue');
  }
}

注意：由于是异步初始化，所有依赖this.draw的代码必须等待init完成后执行，避免出现this.draw未定义的问题。

方案3：在React打包配置中排除Node.js专属依赖 #

若必须在同一文件处理，可通过打包配置让React忽略svgdom这类Node.js专属依赖：

• Webpack配置：在webpack.config.js中添加：

module.exports = {
  // 其他配置...
  resolve: {
    fallback: {
      "fs": false,
      "path": false,
      "os": false
    }
  }
};

• Vite配置：在vite.config.js中添加：

export default {
  // 其他配置...
  resolve: {
    alias: {
      'svgdom': false
    }
  }
};

同时修改环境判断逻辑，确保React环境不会加载svgdom：

class SVGGenerator {
  constructor() {
    if (typeof window !== "undefined") {
      // 浏览器/React环境
      this.draw = SVG();
    } else {
      // Node.js环境同步加载依赖
      const { createSVGWindow } = require("svgdom");
      const { registerWindow, SVG } = require("@svgdotjs/svg.js");

      const window = createSVGWindow();
      const document = window.document;
      registerWindow(window, document);
      this.draw = SVG(document.documentElement);
    }
  }
}

此方法适合不想拆分文件的场景，但需要修改打包配置，兼容性稍差。

内容的提问来源于stack exchange，提问作者Mat