你如何从 React 中的 cdn/script 标签导入一个 javascript 包？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44877904/
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
How do you import a javascript package from a cdn/script tag in React?
提问by Jeremy Herzog
I'd like to import this javascript package in React
我想在 React 中导入这个 javascript 包
<script src="https://cdn.dwolla.com/1/dwolla.js"></script>
However, there is no NPM package, so I can't import it as such:
但是，没有 NPM 包，所以我不能像这样导入它：
import dwolla from 'dwolla'
or
或者
import dwolla from 'https://cdn.dwolla.com/1/dwolla.js'
so whenver I try
所以每当我尝试
dwolla.configure(...)
I get an error saying that dwolla is undefined. How do I solve this?
我收到一条错误消息，说 dwolla 未定义。我该如何解决这个问题？
Thanks
谢谢
回答by Jeremy Herzog
Go to the index.html file and import the script
转到 index.html 文件并导入脚本
<script src="https://cdn.dwolla.com/1/dwolla.js"></script>
Then, in the file where dwolla is being imported, set it to a variable
然后，在导入 dwolla 的文件中，将其设置为一个变量
const dwolla = window.dwolla;
回答by Aaron Newton
This question is getting older, but I found a nice way to approach this using the react-helmetlibrary which I feel is more idiomatic to the way React works. I used it today to solve a problem similar to your Dwolla question:
这个问题越来越老了，但我找到了一种使用react-helmet库来解决这个问题的好方法，我觉得它更符合 React 的工作方式。我今天用它来解决一个类似于你的 Dwolla 问题的问题：
import React from "react";
import Helmet from "react-helmet";
export class ExampleComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
myExternalLib: null
};
this.handleScriptInject = this.handleScriptInject.bind(this);
}
handleScriptInject({ scriptTags }) {
if (scriptTags) {
const scriptTag = scriptTags[0];
scriptTag.onload = () => {
// I don't really like referencing window.
console.log(`myExternalLib loaded!`, window.myExternalLib);
this.setState({
myExternalLib: window.myExternalLib
});
};
}
}
render() {
return (<div>
{/* Load the myExternalLib.js library. */}
<Helmet
script={[{ src: "https://someexternaldomain.com/myExternalLib.js" }]}
// Helmet doesn't support `onload` in script objects so we have to hack in our own
onChangeClientState={(newState, addedTags) => this.handleScriptInject(addedTags)}
/>
<div>
{this.state.myExternalLib !== null
? "We can display any UI/whatever depending on myExternalLib without worrying about null references and race conditions."
: "myExternalLib is loading..."}
</div>
</div>);
}
}
The use of this.statemeans that React will automatically be watching the value of myExternalLib and update the DOM appropriately.
使用this.state意味着 React 将自动监视 myExternalLib 的值并适当地更新 DOM。
Credit: https://github.com/nfl/react-helmet/issues/146#issuecomment-271552211
信用：https: //github.com/nfl/react-helmet/issues/146#issuecomment-271552211
回答by vsr
You can't require or import modules from a URL.
您不能从 URL 要求或导入模块。
What you can do is make an HTTP request to get the script content & execute it, as in the answer for how to require from URL in Node.js
你可以做的是发出一个 HTTP 请求来获取脚本内容并执行它，就像在 Node.js 中如何从 URL 中要求的答案一样
But this would be a bad solution since your code compilation would depend on an external HTTP call.
但这将是一个糟糕的解决方案，因为您的代码编译将依赖于外部 HTTP 调用。
A good solution would be to download the file into your codebase and import it from there. You could commit the file to git if the file doesn't change much & are allowed to do it. Otherwise, a build step could download the file.
一个好的解决方案是将文件下载到您的代码库中并从那里导入。如果文件没有太大变化并且被允许这样做，您可以将文件提交给 git。否则，构建步骤可能会下载该文件。
回答by Aswin
Add the script tag in your index.html and if you are using Webpack, you can use this webpack plugin https://webpack.js.org/plugins/provide-plugin/
在 index.html 中添加 script 标签，如果您使用的是 Webpack，则可以使用此 webpack 插件https://webpack.js.org/plugins/provide-plugin/
回答by Ashish Mukarne
for typescript developers
对于打字稿开发人员
const newWindowObject = window as any;// cast it with any type
const newWindowObject = window as any;// 将其转换为任何类型
let pushNotification = newWindowObject.OneSignal;// now OneSignal object will be accessible in typescript without error
let pushNotification = newWindowObject.OneSignal;// 现在可以在打字稿中访问 OneSignal 对象而不会出错
