將 min.js 文件導入 ReactJS 項目

Question

我已經從第三方獲得了一個 min.js 文件。 我想將它導入到我現有的 ReactJS 項目中。

我找到了一些有關如何開始使用其第三方功能的示例。 每個示例都遵循這種通用方法（下面的ABC.min.js代表他們提供的文件）。 下面的特定示例最終在畫布內呈現圖像：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    </head>
    <body>
        <div>
            <canvas id="canv123" style="width:250px;height:250px"></canvas>            
        </div>

        <script type="module">
            import * as ABC from "../ABC.min.js";

            let object = new ABC.foo("canv123");
            object.resrcEx = new ABC.BaseResrcEx("./assets");
            object.loadCfg("./cfgs/sample.json");
        </script>
    </body> 
</html>

不幸的是，第三方沒有發布他們的 ABC 包（我無法通過yarn或npm下載）。 我只有他們提供給我的ABC.min.js文件。 它包含在腳本標記中導入和執行的函數調用（根據上面的示例）。

我不確定這將如何轉化為我現有的 ReactJS 應用程序（我正在嘗試在 React 組件中實現他們的示例）。 “以 ReactJS 方式”實現這一目標的最佳方法是什么？

特別是，我不確定合並ABC.min.js文件及其相關邏輯的最佳方法是什么（如上例所示）。 我創建了一個新的 react-component 並在componentDidMount()內部我嘗試將在上面的script標記中找到的相同代碼放置 (... let object = new ABC.foo("canv123"); ...etc. etc) 。 但我無法首先import * as ABC from ./ABC.min.js聲明import * as ABC from ./ABC.min.js 。 相反，我收到錯誤消息，指出“找不到模塊./ABC.min.js的聲明文件”。

這里的鏈接聽起來與我需要的相似（但同樣，如上一段所述，在我的情況下，它找不到模塊的聲明文件）：如何將自定義 JS 文件包含到 React 創建應用程序中

域名注冊地址：

我正在嘗試將 min.js 文件導入到 ReactJS 項目中。 原始發布者無法通過npm / yarn訪問該包。 我有哪些選擇？

Answer 1

根據您的編碼示例，我認為您可能只需要學習 React 基礎課程。 如果您想繼續將巨石推上山，一些快速解決方法：

首先，使用諸如create-react-app或next.js 之類的東西來幫助您設置項目。 這些將要求您使用諸如yarn或npm類的包管理器。 使用這些來安裝babylonjs而不是在你的文檔頭部堵塞腳本標簽。 請記住，React 並不像您想象的那樣使用頁面模型。
您需要使用真正的 JS 導入，而不是嘗試在文檔的頭部加載腳本。 React 將捆綁您的應用程序，並希望您以模塊化方式構建您的應用程序。 對於babylon.js它們看起來像這樣：

import { Scene, Engine } from 'babylonjs';

您代碼中的所有這些document.body.whatever都非常不符合 React。 你需要使用useRef鈎子來訪問 React 中的 DOM。 ref 或引用是您如何將渲染方法連接到其他鈎子並操作 DOM 節點（使用 React 時，它們是 JSX 中的 JS 對象）。 仔細閱讀一下，一開始要了解很多。

祝你好運。

將 min.js 文件導入 ReactJS 項目

問題描述

1 個解決方案

解決方案1
1 2021-06-29 22:25:51

將 min.js 文件導入 ReactJS 項目

問題描述

1 個解決方案

解決方案1 1 2021-06-29 22:25:51

解決方案1
1 2021-06-29 22:25:51