我正在尝试使用我在index.html的script标签中加载的库中的变量作为React组件。我已经正常加载了:
<head>
...
<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
<!-- gives me the 'Plaid' library -->
...
<title>React App</title>
</head>
但是，当我尝试在React组件中访问
Plaid时，它是未定义的。我很困惑，因为如果我将调试器放在前面，我仍然可以访问它。例如，在我的App.js组件中，我有:componentDidMount() {
debugger // can access 'Plaid' here
Plaid // throws error, 'Plaid' is undefined
}
即使可以通过调试器访问，
Plaid为什么会引发错误？ 最佳答案
问题是Webpack文件是单独捆绑在一起的，与所需的脚本分开。因此，当您尝试访问全局变量时，它不存在。
如果要使用<script>，则必须自己定制Webpack配置。这涉及弹出create-react-app并自行管理所有内容。 在执行此操作之前，请备份您的项目，因为退出后就没有回头路了! 首次运行:
npm run eject
弹出完成后，导航至
webpack.config.js并将新 key 添加到配置对象:externals: {
}
externals 的作用是从CDN(例如Plaid)的脚本中获取由脚本声明的全局变量，并将其用作项目中的模块。因此，像这样配置它:externals: {
plaid: 'Plaid'
}
这将从CDN中获取全局变量
Plaid，并将其用作名为plaid的模块。然后，您可以在导入后使用Plaid:const Plaid = require('plaid'); //ES5
import Plaid from 'plaid'; //ES2015
(没有经过测试，后果自负)。我更喜欢使用NPM软件包(如果提供)而不是CDN。