Cornerstone 工具在 React 构建中不起作用

Question

我正在开发一个演示基石查看器，该查看器正在开发中工作，但是当我构建应用程序时，基石工具不起作用，而查看器仍然可以显示图像。知道如何解决吗？谢谢！

我已经为查看器安装了这些插件： 基石核心 基础数学 基石工具 基石网络图像加载器 dicom解析器 锤子

React 应用仅包含一个带有以下代码的简单查看器组件。

import React, { useEffect, useRef } from "react";
import cornerstone from "cornerstone-core";
import cornerstoneMath from "cornerstone-math";
import cornerstoneTools from "cornerstone-tools";
import cornerstoneWebImageLoader from "cornerstone-web-image-loader";
import Hammer from "hammerjs/hammer.js";
import "./../styles/styles.scss";

export default function Viewer(props) {
  const canvasRef = useRef(null);
  const imageId =
    "https://rawgit.com/cornerstonejs/cornerstoneWebImageLoader/master/examples/Renal_Cell_Carcinoma.jpg";

  useEffect(() => {
    cornerstoneTools.external.cornerstone = cornerstone; // set up Cornerstone Tools
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneWebImageLoader.external.cornerstone = cornerstone; // set up Cornerstone Web Image Loader
    cornerstoneTools.external.Hammer = Hammer;

    const element = canvasRef.current;

    cornerstone.loadImage(imageId).then((image) => {
      cornerstone.enable(element); // enable the canvas with Cornerstone

      cornerstone.displayImage(element, image); // display the image on the canvas

      cornerstoneTools.init();
      cornerstoneTools.addTool(cornerstoneTools.ZoomTool);
      cornerstoneTools.addTool(cornerstoneTools.WwwcTool);
      cornerstoneTools.addTool(cornerstoneTools.LengthTool);
      cornerstoneTools.setToolActive("Zoom", {
        mouseButtonMask: 2,
        minScale: 0.25,
        maxScale: 20.0,
        preventZoomOutsideImage: true,
      }); // activate ZoomTool with left mouse button

      cornerstoneTools.setToolActive("Length", {
        mouseButtonMask: 1,
      });
    });
  }, []);

  return (
    <>
      <h1>Cornerstone Viewer</h1>
      <div className="viewer" ref={canvasRef}></div>
    </>
  );
}

当我使用 npm run start 运行它时，React 应用程序可以工作，但是当它是为生产而构建的并且我将它托管在服务器上时，基础工具不再工作。

package.json 具有以下依赖项：

 "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "cornerstone-core": "^2.6.1",
    "cornerstone-math": "^0.1.10",
    "cornerstone-tools": "^6.0.8",
    "cornerstone-wado-image-loader": "^4.10.2",
    "cornerstone-web-image-loader": "^2.1.1",
    "dicom-parser": "^1.8.21",
    "hammerjs": "^2.0.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.9.0",
    "react-scripts": "5.0.1",
    "sass": "^1.60.0",
    "web-vitals": "^2.1.4"
  },