将通常自执行的第三方 JavaScript 库导入 React 应用程序（使用 create-react-app）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49436177/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Import third-party JavaScript library that normally self-executes into React app (using create-react-app)
提问by MattSidor
I'm trying to use a third-party library in my React app (built via create-react-app) that is normally loaded via a <script>tag in html file.:
我正在尝试在我的 React 应用程序（通过 构建create-react-app）中使用第三方库，该库通常通过<script>html 文件中的标签加载。：
index.html
索引.html
...
<script src="some-library.js"></script>
</body>
</html>
The script basically just calls itself at the end of the file:
该脚本基本上只是在文件末尾调用自己：
some-library.js
some-library.js
function foo() {
...
}
foo();
There are no modules or exportstatements, so it's not immediately clear to me how to use this in my React app.
没有模块或export语句，所以我不清楚如何在我的 React 应用程序中使用它。
After installing the library with npm, I have tried using importand require()statements in my App.jsfile, without success:
使用 npm 安装库后，我尝试在我的文件中使用import和require()语句App.js，但没有成功：
App.js
应用程序.js
import "some-library"; // doesn't work
require("some-library"); // doesn't work
const SomeLibrary = require("some-library"); // doesn't work
...
Some instructions about using third-party libraries in React suggest using the library within one of the React lifecycle hooks, like componentDidMount(), but there's no function I'm able to call from the library:
关于在 React 中使用第三方库的一些说明建议在 React 生命周期钩子之一中使用该库，例如componentDidMount()，但我无法从库中调用任何函数：
App.js
应用程序.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;
The only solution I've been able to find is to copy some-library.jsinto my public/folder, and then include it as a <script>tag in index.html. This seems like an awkward solution though.
我能找到的唯一解决方案是复制some-library.js到我的public/文件夹中，然后将其作为<script>标签包含在index.html. 不过，这似乎是一个尴尬的解决方案。
Is there a way to import this library in my src/JavaScript files for React instead of just as a <script>tag in index.html?
有没有一种方法导入该库在我src/的阵营，而不是仅仅作为一个JavaScript文件<script>的标签index.html？
(For reference, the specific library I'm trying to use is https://github.com/WICG/focus-visible/.)
（作为参考，我尝试使用的特定库是https://github.com/WICG/focus-visible/。）
采纳答案by MattSidor
I was able to get this working by directly importing the file from the library's distfolder, instead of just naming the library by itself.
我能够通过直接从库的dist文件夹中导入文件来实现这一点，而不仅仅是自己命名库。
I also needed to make sure to import the library first before any other libraries (e.g. React).
我还需要确保在任何其他库（例如React）之前先导入库。
App.js
应用程序.js
import "some-library/dist/some-library.js";
import React, { Component } from "react";
...
