将 JavaScript 项目集成到现有的 ReactJS 项目中答案

【问题标题】：Integrate JavaScript project to an existing ReactJS project将 JavaScript 项目集成到现有的 ReactJS 项目中
【发布时间】：2022-01-12 22:26:13
【问题描述】：

我想将此 repo 集成到我现有的 react.js 项目 https://github.com/zoltan-dulac/Matrix-Construction-Set . Matrix-Construction-Set 项目有很多 Javascript 文件和一些 bower 包，它们需要存在才能正常工作。我已经安装了 bower，并且我在 /bower_components 下拥有与 /node_modules 相同级别的所有软件包。在Matrix-Construction-Set 项目中，所有js 文件都包含在<script/> 之后<body/> 标记之后。我正在使用自定义挂钩，通过以下方式将所有带有src 的标签添加到dom。

自定义钩子

import { useEffect } from 'react';

const useScript = url => {
    useEffect(() => {
        const script = document.createElement('script');

        script.src = url;
        script.async = true;

        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        }
    }, [url]);
};

export default useScript;

其中包含许多js 文件，以下只是我如何在功能组件中执行此操作的示例。我检查了所有脚本都添加到dom。

useScript('../../../../assets/augmented3dmatrix/js/kmewhort/pointer_events_polyfill.js');
useScript('bower_components/visibleIf/shared/js/visibleIf.js');
useScript('bower_components/html5Forms/shared/js/EventHelpers.js');
useScript('bower_components/dialog-polyfill/dist/dialog-polyfill.js');

目前，我在visibleIf.js 文件中收到undefined 的错误。

src\assets\augmented3dmatrix\js\visibleIf.js
 Line 241:41:  'EventHelpers' is not defined      no-undef
  Line 488:41:  'url' is not defined               no-undef
  Line 488:47:  'config' is not defined            no-undef
  Line 492:76:  'url' is not defined               no-undef
  Line 576:31:  'ReadyState' is not defined        no-undef
  Line 580:31:  'HttpCode' is not defined          no-undef
  Line 580:60:  'HttpCode' is not defined          no-undef
  Line 672:18:  'j' is not defined                 no-undef

如何添加 Bower 包以便 js 文件可以访问它们？

如果有人知道类似的新工具，请告诉我。

【问题讨论】：

那个 repo 已经超过 7 年没有更新了，我强烈建议你找到一个类似的 repo，它可能已经在 React 中，甚至在 NPM 存储库中更好。
@Keith 我知道它已经过时了，但它可以满足我的需要。我需要与照片相关的 matrix3d 值。另外，我还没有找到比这个更好的东西。

标签： javascript reactjs react-hooks bower

【解决方案1】：

尝试将<script/> 标签添加到index.html 文件中。

【讨论】：

没有用，同样的错误来自visibleIf.js

【解决方案2】：

我建议分叉存储库并改进代码结构。如果你有几个需要的功能，最好创建一个 npm 包。 https://www.section.io/engineering-education/npm-packages/这里有一些说明

【讨论】：