如何从 React 中的 cdn/script 标签导入 javascript 包？答案

【问题标题】：How do you import a javascript package from a cdn/script tag in React?如何从 React 中的 cdn/script 标签导入 javascript 包？
【发布时间】：2017-12-06 06:28:38
【问题描述】：

我想在 React 中导入这个 javascript 包

<script src="https://cdn.dwolla.com/1/dwolla.js"></script>

但是，没有 NPM 包，所以我不能这样导入：

import dwolla from 'dwolla'

或

import dwolla from 'https://cdn.dwolla.com/1/dwolla.js'

所以每当我尝试

dwolla.configure(...)

我收到一条错误消息，指出 dwolla 未定义。我该如何解决？

谢谢

【问题讨论】：

好像有一个官方的dwolla npm 模块。你可以阅读它here。你可以通过npm install dwolla-v2来安装它。
那不是账户验证的前端模块
啊，好吧，我错了。

标签： javascript html node.js reactjs ecmascript-6

【解决方案1】：

对于打字稿开发人员

const newWindowObject = window as any; // 使用任意类型进行转换

let pushNotification = newWindowObject.OneSignal; // 现在可以在 typescript 中访问 OneSignal 对象而不会出错

【讨论】：

【解决方案2】：

这个问题越来越老了，但我找到了一个很好的方法来使用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>);
    }
}

this.state 的使用意味着 React 将自动监视 myExternalLib 的值并适当地更新 DOM。

信用：https://github.com/nfl/react-helmet/issues/146#issuecomment-271552211

【讨论】：

【解决方案3】：

在你的 index.html 中添加 script 标签，如果你使用的是 Webpack，你可以使用这个 webpack 插件https://webpack.js.org/plugins/provide-plugin/

【讨论】：

【解决方案4】：

转到 index.html 文件并导入脚本

<script src="https://cdn.dwolla.com/1/dwolla.js"></script>

然后，在要导入 dwolla 的文件中，将其设置为变量

const dwolla = window.dwolla;

【讨论】：

如果文件是firebase-app.js怎么办？
@technazi 试试window["firebase-app"]。或者只是做一个console.log(window) 并搜索你的图书馆。

【解决方案5】：

您不能要求或从 URL 导入模块。

ES6: import module from URL

您可以做一个 HTTP 请求以获取脚本内容并执行它，如how to require from URL in Node.js 的答案中所示

但这将是一个糟糕的解决方案，因为您的代码编译将依赖于外部 HTTP 调用。

一个好的解决方案是将文件下载到您的代码库并从那里导入。如果文件没有太大变化并且允许这样做，您可以将文件提交给 git。否则，构建步骤可能会下载文件。

【讨论】：