리액트의 cdn/script 태그에서 javascript 패키지를 Import하려면 어떻게 해야 하나요?

리액트의 cdn/script 태그에서 javascript 패키지를 Import하려면 어떻게 해야 하나요?

이 javascript 패키지를 React에 Import하고 싶습니다.

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

단, NPM 패키지가 없기 때문에 Import할 수 없습니다.

import dwolla from 'dwolla'

또는

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

그래서 내가 노력 할 때마다

dwolla.configure(...)

dwolla가 정의되어 있지 않다고 하는 에러가 표시됩니다.이거 어떻게 풀어요?

감사해요.

index.html 파일로 이동하여 스크립트를 Import합니다.

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

그런 다음 dwolla를 가져오는 파일에서 변수를 설정합니다.

const dwolla = window.dwolla;

이 질문은 점점 더 오래되어가고 있지만, 저는 이 질문에 대한 접근하기 위한 좋은 방법을 찾았습니다.react-helmet리액트가 일하는 방식에 대해 좀 더 관용적이라고 느끼는 도서관.저는 오늘 당신의 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.statereact는 myExternalLib 값을 자동으로 감시하고 DOM을 적절하게 갱신합니다.

크레딧 : https://github.com/nfl/react-helmet/issues/146#issuecomment-271552211

타이프 스크립트 개발자용

const newWindowObject = window as any;// 임의의 타입으로 캐스팅

let pushNotification = newWindowObject.OneSignal;// 이제 OneSignal 객체는 오류 없이 타이프 스크립트로 액세스할 수 있습니다.

URL에서 모듈을 요구하거나 가져올 수 없습니다.

ES6: URL에서 모듈 Import

Node.js의 URL에서 요구하는 방법에 대한 답변과 같이 스크립트 내용을 가져와 실행하는 HTTP 요청을 작성할 수 있습니다.

그러나 코드 컴파일은 외부 HTTP 콜에 의존하기 때문에 이 방법은 좋지 않습니다.

좋은 해결책은 파일을 코드베이스에 다운로드하여 거기에서 Import하는 것입니다.파일이 크게 변경되지 않고 허용된다면 git으로 커밋할 수 있습니다.그렇지 않으면 빌드 단계에서 파일을 다운로드할 수 있습니다.

var _loaded = {};
function addScript(url) {
  if (!loaded[url]) {
    var s = document.createElement('script');
    s.src = url;
    document.head.appendChild(s);
    _loaded[url] = true;
  }
}

컴포넌트의 cdn 서버에서 javascript 파일을 로드하는 방법

스크립트 태그를 index.pack에 추가합니다.Webpack을 사용하는 경우 이 웹팩 플러그인 https://webpack.js.org/plugins/provide-plugin/을 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/44877904/how-do-you-import-a-javascript-package-from-a-cdn-script-tag-in-react