将 min.js 文件导入 ReactJS 项目

Question

I've been provided a min.js file from a third-party.我已经从第三方获得了一个 min.js 文件。 And I want to import this into my existing ReactJS project.我想将它导入到我现有的 ReactJS 项目中。

I've found some samples on how to get started with their third-party features.我找到了一些有关如何开始使用其第三方功能的示例。 Each sample follows this general approach though (where ABC.min.js below represents the file they have provided).每个示例都遵循这种通用方法（下面的ABC.min.js代表他们提供的文件）。 The particular example below ends up rendering an image inside of the canvas:下面的特定示例最终在画布内呈现图像：

<!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>

Unfortunately, the third-party does not have their ABC package published (I cannot download it through yarn or npm ).不幸的是，第三方没有发布他们的 ABC 包（我无法通过yarn或npm下载）。 I only have the ABC.min.js file which they've provided me.我只有他们提供给我的ABC.min.js文件。 It contains the function calls that are being imported and executed inside the script tag (as per their sample above).它包含在脚本标记中导入和执行的函数调用（根据上面的示例）。

I'm not sure how this would translate into my existing ReactJS application (I'm trying to implement their example inside a React component).我不确定这将如何转化为我现有的 ReactJS 应用程序（我正在尝试在 React 组件中实现他们的示例）。 What is the best way to achieve this "in the ReactJS way"? “以 ReactJS 方式”实现这一目标的最佳方法是什么？

In particular, I'm not sure what is the best way to incorporate the ABC.min.js file and the logic associated with it (as per the example above).特别是，我不确定合并ABC.min.js文件及其相关逻辑的最佳方法是什么（如上例所示）。 I've created a new react-component and inside of componentDidMount() I've tried placing the same code found inside their script tag above (... let object = new ABC.foo("canv123"); ...etc. etc) .我创建了一个新的 react-component 并在componentDidMount()内部我尝试将在上面的script标记中找到的相同代码放置 (... let object = new ABC.foo("canv123"); ...etc. etc) 。 But I am unable to do the declaration import * as ABC from ./ABC.min.js in the first place.但我无法首先import * as ABC from ./ABC.min.js声明import * as ABC from ./ABC.min.js 。 Instead, I get error message that states " could not find a declaration file for module ./ABC.min.js ".相反，我收到错误消息，指出“找不到模块./ABC.min.js的声明文件”。

This link here sounds similar to what I need (but again, as mentioned in previous paragraph, in my case, it cannot find declaration file for the module): How to include custom JS files in to React create app这里的链接听起来与我需要的相似（但同样，如上一段所述，在我的情况下，它找不到模块的声明文件）：如何将自定义 JS 文件包含到 React 创建应用程序中

TLDR:域名注册地址：

I'm trying to import a min.js file into a ReactJS project.我正在尝试将 min.js 文件导入到 ReactJS 项目中。 The original publisher does not have the package accessible through npm / yarn .原始发布者无法通过npm / yarn访问该包。 What are my options?我有哪些选择？

Answer 1

Based on your coding samples, I think you probably need to just do a React basics course.根据您的编码示例，我认为您可能只需要学习 React 基础课程。 Some quick fixes if you want to keep pushing the boulder uphill:如果您想继续将巨石推上山，一些快速解决方法：

First, use the something like create-react-app or next.js which will help you set up your project.首先，使用诸如create-react-app或next.js 之类的东西来帮助您设置项目。 These will require you use a package manager like yarn or npm .这些将要求您使用诸如yarn或npm类的包管理器。 Use these to install babylonjs instead of jamming a script tag in the head of your doc.使用这些来安装babylonjs而不是在你的文档头部堵塞脚本标签。 Remember, React doesn't work with a page model like you're thinking.请记住，React 并不像您想象的那样使用页面模型。
You need to use true JS imports instead of trying to load scripts in the head of your document.您需要使用真正的 JS 导入，而不是尝试在文档的头部加载脚本。 React will bundle your app and expects you to construct your application modularly. React 将捆绑您的应用程序，并希望您以模块化方式构建您的应用程序。 They look like this for babylon.js :对于babylon.js它们看起来像这样：

import { Scene, Engine } from 'babylonjs';

All these document.body.whatever in your code are very un-React.您代码中的所有这些document.body.whatever都非常不符合 React。 You need to be using the useRef hook to access the DOM in React.你需要使用useRef钩子来访问 React 中的 DOM。 A ref, or reference, is how you connect your render method to other hooks and manipulate DOM nodes (which are JS objects in JSX when using React). ref 或引用是您如何将渲染方法连接到其他钩子并操作 DOM 节点（使用 React 时，它们是 JSX 中的 JS 对象）。 Read up on it a bit, it's a lot to get your head around at first.仔细阅读一下，一开始要了解很多。

Good luck.祝你好运。

将 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