Question

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

的index.html

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

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

一些-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生命周期挂钩中使用该库，例如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/的{{1}} 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";
...

将通常自行执行的第三方JavaScript库导入React应用程序（使用create-react-app）

1 个答案: