将 JavaScript 项目集成到现有 ReactJS 项目中

Question

我想将此 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文件都包含在<body/>标签后面的<script/>中。 我正在使用一个自定义钩子，它通过以下方式将所有带有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文件可以访问它们？

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

Answer 1

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

Answer 2

我建议分叉回购并改进代码结构。 如果您有几个需要的功能，最好创建一个 npm package。 https 上有一些说明：//www.section.io/engineering-education/npm-packages/