javascript - 将正常自执行的第三方 JavaScript 库导入 React 应用程序(使用 create-react-app)

Question

我正在尝试在我的 React 应用程序(通过 create-react-app 构建)中使用第三方库，该库通常通过 <script> 加载html 文件中的标记。:

index.html

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

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

some-library.js

function foo() {
  ...
}

foo();

没有模块或export语句，所以我不是很清楚如何在我的 React 应用程序中使用它。

用 npm 安装库后，我尝试使用 import和 require()我的声明 App.js文件，没有成功:

App.js

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

...

有关在 React 中使用第三方库的一些说明建议在 React 生命周期 Hook 之一中使用该库，例如 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/ 中导入这个库？ React 的 JavaScript 文件而不仅仅是 <script>在 index.html 中标记?

(作为引用，我尝试使用的特定库是 https://github.com/WICG/focus-visible/ 。)

Answer 1

我能够通过直接从库的 dist 文件夹中导入文件来实现这一点，而不是仅仅自己命名库。

我还需要确保在任何其他库(例如 React)之前首先导入该库。

App.js

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