将通常可以自行执行的第三方JavaScript库导入React应用(使用create-react-app)

我试图在我的React应用程序(通过create-react-app构建)中使用第三方库,该库通常是通过< script>标记在html文件中.：

index.html

    ...
    <script src="some-library.js"></script>
  </body>
</html>

该脚本基本上只是在文件末尾调用自身：

some-library.js

function foo() {
  ...
}

foo();

没有模块或导出语句,因此我尚不清楚如何在我的React应用程序中使用它.

使用npm安装库之后,我尝试在App.js文件中使用import和require()语句,但未成功：

App.js

import "some-library";                          // doesn't work
require("some-library");                        // doesn't work
const SomeLibrary = require("some-library");    // doesn't work

...

有关在React中使用第三方库的一些说明建议在React生命周期挂钩之一中使用该库,例如componentDidMount(),但我无法从该库中调用任何函数：

App.js

import React, { Component } from "react";
import * as SomeLibrary from "some-library";

class App extends Component {
  componentDidMount() {
    SomeLibrary.foo();  // doesn't work (wasn't exported in "some-library")
  }

  render() {
    ...
  }
}

export default App;

我唯一能找到的解决方案是将some-library.js复制到我的public /文件夹中,然后将其作为< script>在index.html中标记.不过,这似乎是一个尴尬的解决方案.

有没有一种方法可以在我的src / JavaScript文件中为React导入该库,而不是像< script>在index.html中标记？

(作为参考,我要使用的特定库是https://github.com/WICG/focus-visible/.)

解决方法:

通过直接从库的dist文件夹中导入文件,而不仅仅是自己命名库,我能够使它正常工作.

我还需要确保先导入该库,然后再导入其他任何库(例如React).

App.js

import "some-library/dist/some-library.js";
import React, { Component } from "react";
...

标签：create-react-app,reactjs,javascript
来源： https://codeday.me/bug/20191025/1927418.html