pao*_*iff 5 html javascript reactjs create-react-app
我正在尝试使用库中的变量，该变量已加载到index.html我的 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>
但是，当我尝试访问Plaid我的 React 组件时，它是未定义的。我很困惑，因为如果我在它之前放置一个调试器，我仍然可以访问它。例如，在我的App.js组件中，我有：
componentDidMount() {
debugger // can access 'Plaid' here
Plaid // throws error, 'Plaid' is undefined
}
为什么会Plaid抛出错误，即使我可以通过调试器访问它？
问题在于 Webpack 文件是单独捆绑的，与所需的脚本分开。因此，当您尝试访问全局变量时，它并不存在。
如果您想使用 s，则必须自己自定义 Webpack 配置<script>。这涉及到create-react-app你自己驱逐和管理一切。在执行此操作之前备份您的项目，因为弹出后就无法返回！第一次运行：
npm run eject
弹出完成后，导航到webpack.config.js配置对象并向其添加新密钥：
externals: {
}
所做externals的就是从 CDN（例如 Plaid）获取由脚本声明的全局变量，并允许其在项目中用作模块。因此，配置如下：
externals: {
plaid: 'Plaid'
}
Plaid这从 CDN获取全局变量并将其作为名为 的模块提供服务plaid。导入后就可以使用 Plaid 了：
const Plaid = require('plaid'); //ES5
import Plaid from 'plaid'; //ES2015
（这些均未经过测试，请自行承担风险）。我更愿意使用 NPM 包（如果有的话），而不是 CDN。
| 归档时间： |
|
| 查看次数： |
3612 次 |
| 最近记录： |