我正在尝试在我的 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/ 。)
最佳答案
我能够通过直接从库的 dist
文件夹中导入文件来实现这一点,而不是仅仅自己命名库。
我还需要确保在任何其他库(例如 React
)之前首先导入该库。
App.js
import "some-library/dist/some-library.js";
import React, { Component } from "react";
...
关于javascript - 将正常自执行的第三方 JavaScript 库导入 React 应用程序(使用 create-react-app),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49436177/