웹 팩을 사용하여 CDN 또는 외부 벤더 javascript lib를 html 파일이 아닌 js 파일로 로드하는 방법

웹 팩을 사용하여 CDN 또는 외부 벤더 javascript lib를 html 파일이 아닌 js 파일로 로드하는 방법

저는 클라이언트 측 프로그래밍에 리액트 스타터 키트를 사용하고 있습니다.리액트와 웹 팩을 사용합니다.편집할 index.html 또는 html이 없습니다.모두 js 파일입니다.클라우드에서 벤더 jslib를 로드하려면 어떻게 해야 합니까?

html html 을 참조해 주세요. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>

그러나 js 파일에서는 npm 설치 패키지만 사용합니다.html 파일 없이 위의 lib를 Import하려면 어떻게 해야 하나요?Import를 시도했는데 로컬 파일에서만 작동합니다.

업데이트 10/21/15 지금까지 두 가지 방향을 시도했지만 둘 다 이상적이지 않습니다.

1. @minheq yes react start kit용 html 파일 종류가 있습니다.src/components/Html 아래에 html.js가 있습니다.다음과 같이 cloud lib와 그 모든 종속성을 넣을 수 있습니다.

        <div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
        <script src="/app.js"></script>
        <script dangerouslySetInnerHTML={this.trackingCode()} />
    </body>

좋은 소식은 이것이 작동한다는 것입니다.저는 js 파일에서 다른 작업을 할 필요가 없습니다.가져오거나 요구하지 않습니다.하지만 지금은 두 개의 jquery lib가 다른 방식으로 로드되어 있습니다.하나는 여기, 다른 하나는 npm과 웹 팩을 통해.나중에는 곤란할 것 같아요.서버측 로딩으로 인해 브라우저 창에 none home path를 입력하면 react-routing에서 "undefined variable" 오류가 발생합니다.그래서 이 솔루션은 별로 좋지 않습니다.

2. 웹 팩 외부 기능을 사용합니다.이것은 링크로서 문서화되어 있습니다."기존 API를 번들로 Import할 때 응용 프로그램에도 외부 옵션을 사용할 수 있습니다.즉, CDN에서 jquery(별도 태그)를 사용하지만 번들에 jquery("jquery")를 필요로 합니다.외부로 지정합니다.{ externals : { jquery : " jQuery " } } 。단, 제가 찾은 문서에서는 이 작업을 정확하게 수행하는 방법에 대해 까다롭습니다.아직까지는 어떻게 교환해야 할지 모르겠습니다.<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>htmlmanager로 됩니다.

externals이 은 내가 직접하기 때문에 라는 입니다.제가 직접 포함시키겠습니다."

필요한 것은 script.js 등의 스크립트 로더 구현입니다.다른 스크립트 로더의 구현을 비교하는 간단한 앱도 작성했습니다.링크입니다.

var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
  $('body').html('It works!')
});

JS에 스크립트태그를 생성할 수 있습니다.

$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))

js 번들을 첨부하여 사용자에게 서비스를 제공하기 위해 사용되는 html 파일이 1개 있습니다.스크립트 태그를 html 파일에 첨부할 수 있습니다.

웹 팩의 외부 사용:

externals를 사용하면 웹 팩에 의해 해결되지 않지만 출력의 종속성이 되는 라이브러리의 종속성을 지정할 수 있습니다.즉, 실행 시 환경에서 Import됩니다.

저는 해결책을 찾아봤지만, 대부분의 제안은 외부적인 것에 근거하고 있었습니다.이것은 제 경우에는 유효하지 않습니다.

이 다른 투고에서는, 솔루션을 투고했습니다.https://stackoverflow.com/a/62603539/8650621

즉, 원하는 파일을 로컬 디렉토리에 다운로드하는 역할을 하는 별도의 JS 파일 사용을 종료했습니다.그런 다음 WebPack은 이 디렉토리를 스캔하여 다운로드한 파일을 응용 프로그램과 함께 번들합니다.

언급URL : https://stackoverflow.com/questions/33250174/how-to-use-webpack-to-load-cdn-or-external-vendor-javascript-lib-in-js-file-not