我有一个在vanilla js库中编写的开放源代码：https://www.openscreen.cz/software/inchlib/home/
我想将库导入到我的react项目中。inchlib-1.2.0.js文件不包含任何导出函数/变量，它依赖于Jquery和Kinetic等几个库。
首先，我尝试将inchlib-1.2.0.js文件放入公共目录，然后将所有三个脚本添加到我的index.html 中
这是我的inchlib-1.2.0.js文件中的初始代码，我应该通过以下构造函数初始化我的inchlib对象：
var InCHlib;
(function($){
InCHlib = function(settings){
var self = this;
self.user_settings = settings;
self.target_element = $("#" + settings.target);
var target_width = self.target_element.width();
self.target_element.css({"position": "relative"});
.
. // more code
.
}(jQuery));
我的index.html:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.0.3.js" integrity="sha256-lCf+LfUffUxr81+W0ZFpcU0LQyuZ3Bj0F2DQNCxTgSI=" crossorigin="anonymous"></script>
<script language="JavaScript" type="text/javascript" src="http://openscreen.cz/software/inchlib/static/js/kinetic-v5.1.0.min.js"></script>
<script src="./inchlib-1.2.0.js" type="text/JavaScript"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
我的App.js组件：
import React, { useState, useEffect } from 'react';
import './App.css';
function App() {
useEffect(() => {
var inchlib = InCHlib({"target": "inchlib",
"width": 800,
"height": 1200,
"column_metadata_colors": "RdLrBu",
"heatmap_colors": "RdBkGr",
"max_percentile": 90,
"middle_percentile": 60,
"min_percentile": 10,
"heatmap_font_color": "white",
text: 'biojs'});
inchlib.read_data_from_file("../microarrays.json");
inchlib.draw();
});
return (
<div>
<div>
<div id="inchlib"></div>
</div>
</div>
);
}
我得到这个错误：'InCHlib' is not defined no-undef
我的第二个尝试是通过我的应用程序组件导入js文件，并将inchlib-1.2.0.js放入我的src目录中。但是react无法从我的index.html.加载查询脚本和Kinetic脚本
srcinchlibdistinchlib-1.2.0.js
Line 162:29: '$' is not defined no-undef
Line 565:32: 'Kinetic' is not defined no-undef
Line 570:30: 'Kinetic' is not defined no-undef
Line 578:31: 'Kinetic' is not defined no-undef
Line 589:23: 'Kinetic' is not defined no-undef
Line 597:29: 'Kinetic' is not defined no-undef
Line 602:31: 'Kinetic' is not defined no-undef
Line 608:32: 'Kinetic' is not defined no-undef
Line 615:31: 'Kinetic' is not defined no-undef
Line 620:32: 'Kinetic' is not defined no-undef
Line 626:24: 'Kinetic' is not defined no-undef
Line 634:34: 'Kinetic' is not defined no-undef
Line 639:33: 'Kinetic' is not defined no-undef
Line 645:23: 'Kinetic' is not defined no-undef
Line 649:32: 'Kinetic' is not defined no-undef
Line 660:24: 'Kinetic' is not defined no-undef
Line 686:5: '$' is not defined no-undef
Line 741:7: '$' is not defined no-undef
Line 759:13: 'id' is not defined no-undef
Line 760:22: 'id' is not defined no-undef
Line 768:13: 'id' is not defined no-undef
Line 769:30: 'id' is not defined no-undef
Line 819:57: 'len' is not defined no-undef
Line 819:80: 'len' is not defined no-undef
Line 1069:24: 'Kinetic' is not defined no-undef
Line 1112:30: 'Kinetic' is not defined no-undef
Line 1113:39: 'Kinetic' is not defined no-undef
Line 1125:35: 'Kinetic' is not defined no-undef
Line 1211:30: 'Kinetic' is not defined no-undef
Line 1212:28: 'Kinetic' is not defined no-undef
Line 1233:42: 'Kinetic' is not defined no-undef
Line 1272:16: 'keys' is not defined no-undef
Line 1272:63: 'len' is not defined no-undef
Line 1272:69: 'keys' is not defined no-undef
Line 1272:86: 'len' is not defined no-undef
Line 1273:13: 'keys' is not defined no-undef
Line 1280:16: 'len' is not defined no-undef
Line 1280:44: 'len' is not defined no-undef
Line 1384:9: 'i' is not defined no-undef
Line 1384:16: 'keys' is not defined no-undef
Line 1384:53: 'len' is not defined no-undef
Line 1384:59: 'keys' is not defined no-undef
Line 1384:72: 'i' is not defined no-undef
Line 1384:76: 'len' is not defined no-undef
Line 1384:81: 'i' is not defined no-undef
Line 1385:9: 'node' is not defined no-undef
Line 1385:32: 'keys' is not defined no-undef
Line 1385:37: 'i' is not defined no-undef
Line 1386:12: 'node' is not defined no-undef
Line 1387:23: 'node' is not defined no-undef
Line 1397:13: 'i' is not defined no-undef
Line 1397:20: 'i' is not defined no-undef
Line 1397:49: 'i' is not defined no-undef
Line 1398:27: 'i' is not defined no-undef
Line 1405:13: 'i' is not defined no-undef
Line 1405:20: 'keys' is not defined no-undef
Line 1405:61: 'len' is not defined no-undef
Line 1405:67: 'keys' is not defined no-undef
Line 1405:80: 'i' is not defined no-undef
Line 1405:84: 'len' is not defined no-undef
Line 1405:89: 'i' is not defined no-undef
Line 1406:47: 'keys' is not defined no-undef
Line 1406:52: 'i' is not defined no-undef
Line 1529:32: 'Kinetic' is not defined no-undef
Line 1530:34: 'Kinetic' is not defined no-undef
Line 1543:11: 'key' is not defined no-undef
Line 1544:41: 'key' is not defined no-undef
Line 1545:48: 'key' is not defined no-undef
Line 1552:11: 'y1' is not defined no-undef
Line 1555:101: 'y1' is not defined no-undef
Line 1558:15: 'y1' is not defined no-undef
Line 1558:20: 'y1' is not defined no-undef
Line 1566:41: 'Kinetic' is not defined no-undef
Line 1584:21: 'Kinetic' is not defined no-undef
Line 1692:23: 'width' is not defined no-undef
Line 1693:23: 'x' is not defined no-undef
Line 1693:54: 'width' is not defined no-undef
Line 1694:23: 'y' is not defined no-undef
Line 1695:40: 'x' is not defined no-undef
Line 1695:45: 'y' is not defined no-undef
Line 1723:15: 'width' is not defined no-undef
Line 1724:15: 'x' is not defined no-undef
Line 1724:46: 'width' is not defined no-undef
Line 1725:15: 'y' is not defined no-undef
Line 1726:32: 'x' is not defined no-undef
Line 1726:37: 'y' is not defined no-undef
Line 1735:21: 'Kinetic' is not defined no-undef
Line 1789:19: 'i' is not defined no-undef
Line 1789:26: 'i' is not defined no-undef
Line 1789:44: 'i' is not defined no-undef
Line 1790:39: 'i' is not defined no-undef
Line 1805:18: 'keys' is not defined no-undef
Line 1805:65: 'len' is not defined no-undef
Line 1805:71: 'keys' is not defined no-undef
Line 1805:88: 'len' is not defined no-undef
Line 1806:11: 'leaf_id' is not defined no-undef
Line 1806:21: 'keys' is not defined no-undef
Line 1807:37: 'leaf_id' is not defined no-undef
Line 1811:64: 'leaf_id' is not defined no-undef
Line 1849:22: 'Kinetic' is not defined no-undef
Line 1873:31: 'Kinetic' is not defined no-undef
Line 1881:18: 'len' is not defined no-undef
Line 1881:61: 'len' is not defined no-undef
Line 1885:18: 'len' is not defined no-undef
Line 1885:65: 'len' is not defined no-undef
Line 1897:18: 'len' is not defined no-undef
Line 1897:50: 'len' is not defined no-undef
Line 1967:22: 'Kinetic' is not defined no-undef
Line 1973:24: 'Kinetic' is not defined no-undef
Line 1989:33: 'Kinetic' is not defined no-undef
Line 2009:26: 'Kinetic' is not defined no-undef
Line 2029:35: 'Kinetic' is not defined no-undef
Line 2444:36: 'Kinetic' is not defined no-undef
Line 2516:39: 'Kinetic' is not defined no-undef
Line 2810:28: 'Kinetic' is not defined no-undef
Line 2827:28: 'Kinetic' is not defined no-undef
Line 2853:11: 'filter_list' is not defined no-undef
Line 2864:19: 'filter_list' is not defined no-undef
Line 2864:33: 'filter_list' is not defined no-undef
Line 2868:76: 'filter_list' is not defined no-undef
Line 2910:34: '$' is not defined no-undef
Line 2911:36: '$' is not defined no-undef
Line 2916:19: '$' is not defined no-undef
Line 2920:19: '$' is not defined no-undef
Line 2926:11: '$' is not defined no-undef
Line 2935:14: '$' is not defined no-undef
Line 2937:17: '$' is not defined no-undef
Line 2943:17: '$' is not defined no-undef
Line 2997:17: '$' is not defined no-undef
Line 3026:21: '$' is not defined no-undef
Line 3041:20: '$' is not defined no-undef
Line 3042:20: '$' is not defined no-undef
Line 3051:22: '$' is not defined no-undef
Line 3055:27: '$' is not defined no-undef
Line 3087:7: '$' is not defined no-undef
Line 3114:25: '$' is not defined no-undef
Line 3121:23: '$' is not defined no-undef
Line 3124:18: 'keys' is not defined no-undef
Line 3124:53: 'len' is not defined no-undef
Line 3124:59: 'keys' is not defined no-undef
Line 3124:76: 'len' is not defined no-undef
Line 3125:15: 'keys' is not defined no-undef
Line 3134:18: 'keys' is not defined no-undef
Line 3134:53: 'len' is not defined no-undef
Line 3134:59: 'keys' is not defined no-undef
Line 3134:76: 'len' is not defined no-undef
Line 3135:15: 'keys' is not defined no-undef
Line 3158:7: '$' is not defined no-undef
Line 3159:7: '$' is not defined no-undef
Line 3160:7: '$' is not defined no-undef
Line 3161:7: '$' is not defined no-undef
Line 3162:7: '$' is not defined no-undef
Line 3169:27: '$' is not defined no-undef
Line 3172:20: '$' is not defined no-undef
Line 3173:20: '$' is not defined no-undef
Line 3182:33: '$' is not defined no-undef
Line 3185:22: '$' is not defined no-undef
Line 3218:20: '$' is not defined no-undef
Line 3245:20: '$' is not defined no-undef
Line 3246:20: '$' is not defined no-undef
Line 3255:19: '$' is not defined no-undef
Line 3256:19: '$' is not defined no-undef
Line 3257:7: '$' is not defined no-undef
Line 3342:22: '$' is not defined no-undef
Line 3636:5: '$' is not defined no-undef
Line 3640:7: '$' is not defined no-undef
有什么建议吗？
InCHlib似乎使用了过时的方法来填充全局变量，使其对应用程序可见，而不是使其本身成为模块。因此，您可以使用InCHlib或window.InCHlib访问它。
如果您为InCHlib添加类型定义，那么您的第一次尝试可能会成功，假设您使用的是typescript，最好将其放在window.InCHlib上。
另一种可能的选择是将dynamic和jquery添加到您的npm/yarn模块中，因为这两个模块已被制成模块，并将正确的导入添加到InCHlib.js中，并可能将InCHlib转换为模块。
// at the end of InCHlib
module.exports = InCHlib;