将外部脚本添加到React并创建新实例

Question

我正在尝试将此github project实现到我的React Web应用程序。这是一个在背景中放置花式画布的外部脚本。

我试图加载它：

import {WarpSpeed} from './warpspeed.js'
import WarpSpeed from './warpspeed.js'

然后创建一个新实例：

let x = new WarpSpeed("canvasID")

但它抛出一个错误：

TypeError：__ WWEPACK_IMPORTED_MODULE_4__helpers_warpspeed ___ default.a不是构造函数

我也尝试使用react-load-script，但它没有意义我之后不能调用新的WarpSpeed，因为它是未定义的。

Answer 1

您尝试使用的模块不适用于commonjs导入。您需要将整个事物包装在通用模块定义中。

请使用这里的那个：

https://gist.githubusercontent.com/tameemsafi/0d909a4060640b948f37ec59460f20d4/raw/c7f4e9020ccb1fb0a9dcf54221c67249030640eb/warpspeed-umd.js

我把它包装在一个UMD IFFE中，它允许你使用ES6导入。我还将window.requestAnimationFrame polyfill改为更好的版本。

您可以将代码放在文件warpspeed.js中。

CommonJS的：

const WarpSpeed = require('./warpspeed.js');

ES6（需要转换为commonjs）：

import WarpSpeed from './warpspeed.js'

Answer 2

根据这个：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_a_module_for_its_side_effects_only

我发现的其他信息，在检查了WarpSpeed.js的源代码后，你想要的东西似乎不可能。

你也可以在这里确认一下：

ES6 import equivalent of require() without exports

您应该添加适当的导出到WarpSpeed.js文件。也许fork项目，修改它以便ES5 +兼容并创建pull请求。可能lib创建者会很有用;）