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

Question

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

我尝试加载它：

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

然后创建一个新实例：

let x = new WarpSpeed("canvasID")

但是会引发错误：

  

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

我也尝试使用react-load-script，但是由于它是未定义的，因此以后也不能调用new WarpSpeed是没有意义的。

Answer 1

据此：

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文件。 也许分叉该项目，对其进行修改，使其与ES5 +兼容并创建请求请求。可能是lib creator会很棒；）

Answer 2

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

请在此处使用一个：

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

我将其包装在UMD IFFE中，它将允许您使用ES6导入。我也将return false; polyfill更改为更好的版本。

您可以将代码放在文件window.requestAnimationFrame中。

CommonJS：

warpspeed.js

ES6（需要转换为commonjs）：

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