[javascript] 다른 JavaScript 파일에 JavaScript 파일을 포함 시키려면 어떻게합니까?

JAVASCRIPT / 글쓴이

@import다른 JavaScript 파일에 JavaScript 파일을 포함시킬 수있는 CSS 와 유사한 JavaScript가 있습니까?

답변

이전 버전의 JavaScript에는 가져 오기, 포함 또는 필요가 없었으므로이 문제에 대한 다양한 접근 방식이 개발되었습니다.

그러나 2015 년 (ES6) 이후 JavaScript는 Node.js에서 모듈을 가져 오기 위한 ES6 모듈 표준을 가지고 있으며 대부분의 최신 브라우저 에서도 지원됩니다 .

구형 브라우저와의 호환성을 위해 Webpack 및 Rollup 과 같은 빌드 도구 및 / 또는 Babel 과 같은 변환 툴을 사용할 수 있습니다.

ES6 모듈

ECMAScript (ES6) 모듈은 플래그 가있는 v8.5 이후 및 플래그가없는 Node.js v13.8.0 이상부터 Node.js 에서 지원 되었습니다 --experimental-modules. “ESM”(Node.js를의 이전 CommonJS 스타일의 모듈 시스템 대 [ “CJS”]) 당신이 중 하나를 사용하도록 설정하려면 "type": "module"에서를 package.json하거나 파일 확장자를 제공합니다 .mjs. ( .cjs기본적으로 ESM이면 Node.js의 이전 CJS 모듈로 작성된 모듈의 이름을 지정할 수 있습니다 .)

사용 package.json:

{
    "type": "module"
}

그런 다음 module.js:

export function hello() {
  return "Hello";
}

그런 다음 main.js:

import { hello } from './module.js';
let val = hello();  // val is "Hello";

를 사용 .mjs하면 다음이 가능합니다 module.mjs.

export function hello() {
  return "Hello";
}

그런 다음 main.mjs:

import { hello } from './module.mjs';
let val = hello();  // val is "Hello";

브라우저의 ECMAScript 모듈

브라우저는 Safari 10.1, Chrome 61, Firefox 60 및 Edge 16 이후 ECMAScript 모듈을 직접로드 할 수 있습니다 (웹팩과 같은 도구는 필요 없음) . caniuse 에서 현재 지원을 확인하십시오 . Node.js의 .mjs확장명 을 사용할 필요는 없습니다 . 브라우저는 모듈 / 스크립트의 파일 확장자를 완전히 무시합니다.

<script type="module">
  import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
  hello('world');
</script>
// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

https://jakearchibald.com/2017/es-modules-in-browsers/ 에서 자세한 내용을 확인하십시오.

브라우저에서 동적 가져 오기

동적 가져 오기를 통해 스크립트가 필요에 따라 다른 스크립트를로드 할 수 있습니다.

<script type="module">
  import('hello.mjs').then(module => {
      module.hello('world');
    });
</script>

https://developers.google.com/web/updates/2017/11/dynamic-import 에서 자세히 알아 보십시오.

Node.js가 필요합니다

Node.js에서 여전히 널리 사용되는 이전 CJS 모듈 스타일은 module.exports/require 시스템입니다.

// mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"

JavaScript가 전처리를 요구하지 않는 브라우저에 외부 JavaScript 컨텐츠를 포함시키는 다른 방법이 있습니다.

AJAX 로딩

AJAX 호출로 추가 스크립트를로드 한 다음이를 사용 eval하여 실행할 수 있습니다. 가장 간단한 방법이지만 JavaScript 샌드 박스 보안 모델로 인해 도메인으로 제한됩니다. 를 사용하면 eval버그, 해킹 및 보안 문제가 발생할 수 있습니다.

페치 로딩

동적 가져 오기와 마찬가지로 Fetch Inject 라이브러리를 fetch사용하여 스크립트 종속성에 대한 실행 순서를 제어하는 ​​약속을 사용하여 하나 이상의 스크립트를 호출하여 로드 할 수 있습니다 .

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

jQuery 로딩

의 jQuery 라이브러리 로딩 기능을 제공 한 줄에 :

$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

동적 스크립트 로딩

스크립트 URL이있는 스크립트 태그를 HTML에 추가 할 수 있습니다. jQuery의 오버 헤드를 피하기 위해 이상적인 솔루션입니다.

스크립트는 다른 서버에 상주 할 수도 있습니다. 또한 브라우저는 코드를 평가합니다. <script>태그 중 하나의 웹 페이지로 주입 될 수있는 <head>, 혹은 그저 폐쇄 전에 삽입 </body>태그.

이것이 어떻게 작동하는지에 대한 예는 다음과 같습니다.

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");  // create a script DOM node
    script.src = url;  // set its src to the provided URL

    document.head.appendChild(script);  // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}

이 함수는 <script>페이지의 헤드 섹션 끝에 새 태그를 추가합니다 . 여기서 src속성은 함수에 첫 번째 매개 변수로 제공되는 URL로 설정됩니다.

이러한 솔루션은 모두 JavaScript Madness : Dynamic Script Loading에 설명되어 있습니다.

스크립트가 언제 실행되었는지 감지

이제 알아야 할 큰 문제가 있습니다. 그렇게하면 원격으로 코드를로드 할 수 있습니다 . 최신 웹 브라우저는 성능을 향상시키기 위해 모든 것을 비동기식으로로드하기 때문에 파일을로드하고 현재 스크립트를 계속 실행합니다. (이는 jQuery 메소드와 수동 동적 스크립트로드 메소드 모두에 적용됩니다.)

즉, 이러한 트릭을 직접 사용하는 경우 새로로드 된 코드를로드 요청 후 다음 줄에서 사용할 수 없습니다 .로드가 계속 진행 중이기 때문입니다.

예를 들면 다음과 같습니다. my_lovely_script.jscontains MySuperObject:

var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);

var s = new MySuperObject();

Error : MySuperObject is undefined

그런 다음 치는 페이지를 다시로드하십시오 F5. 그리고 작동합니다! 혼란스러운 …

그래서 어떻게해야합니까?

글쎄, 당신은 내가 준 링크에서 저자가 제안한 해킹을 사용할 수 있습니다. 요약하자면, 급한 사람들을 위해, 그는 스크립트가로드 될 때 이벤트를 사용하여 콜백 함수를 실행합니다. 따라서 콜백 함수에서 원격 라이브러리를 사용하여 모든 코드를 넣을 수 있습니다. 예를 들면 다음과 같습니다.

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.head;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

그런 다음 스크립트가 람다 함수에 로드 된 후 사용하려는 코드를 작성하십시오 .

var myPrettyCode = function() {
   // Here, do whatever you want
};

그런 다음 모든 것을 실행하십시오.

loadScript("my_lovely_script.js", myPrettyCode);

스크립트는 브라우저가로드 된 후 또는 라인 포함 여부에 따라 DOM이로드 된 후 또는 이전에 실행될 수 있습니다 script.async = false;. Javascript 로딩에 대한 훌륭한 기사 가 있습니다 .

소스 코드 병합 / 전처리

이 답변의 맨 위에 언급했듯이 많은 개발자는 프로젝트에서 Parcel, Webpack 또는 Babel과 같은 빌드 / 번역 도구를 사용하여 향후 JavaScript 구문을 사용하고, 이전 브라우저에 대한 하위 호환성을 제공하고, 파일을 결합하고, 축소하고, 코드 분할 등을 수행하십시오.

답변

더 진보 된 것을 찾는 사람이라면 RequireJS를 사용해보십시오 . 종속성 관리, 동시성 향상 및 복제 방지 (스크립트를 두 번 이상 검색)와 같은 추가 이점을 얻을 수 있습니다.

“모듈”로 JavaScript 파일을 작성한 다음 다른 스크립트에서 종속성으로 참조 할 수 있습니다. 또는 RequireJS를 간단한 “이 스크립트 가져 오기”솔루션으로 사용할 수 있습니다.

예:

종속성을 모듈로 정의하십시오.

some-dependency.js

define(['lib/dependency1', 'lib/dependency2'], function (d1, d2) {

     //Your actual script goes here.   
     //The dependent scripts will be fetched if necessary.

     return libraryObject;  //For example, jQuery object
});

implementation.js 는 some-dependency.js에 의존 하는 “기본”JavaScript 파일입니다.

require(['some-dependency'], function(dependency) {

    //Your script goes here
    //some-dependency.js is fetched.   
    //Then your script is executed
});

GitHub 읽어보기 에서 발췌 :

RequireJS는 일반 JavaScript 파일과 더 정의 된 모듈을로드합니다. 웹 워커를 포함하여 브라우저 내 사용에 최적화되어 있지만 Rhino 및 Node와 같은 다른 JavaScript 환경에서 사용할 수 있습니다. 비동기 모듈 API를 구현합니다.

RequireJS는 일반 스크립트 태그를 사용하여 모듈 / 파일을로드하므로 쉽게 디버깅 할 수 있습니다. 기존 JavaScript 파일을로드하는 데 간단히 사용할 수 있으므로 JavaScript 파일 을 다시 쓰지 않고도 기존 프로젝트에 파일 을 추가 할 수 있습니다.

…

답변

실제로이 있다 자바 스크립트 파일을로드 할 수있는 방법 하지 당신이 그것을로드 한 후 새로로드 된 파일 오른쪽에 포함 된 기능을 사용할 수 있도록, 비동기, 그리고 나는 그것이 모든 브라우저에서 작동합니다 생각합니다.

페이지 요소에서 다음 을 사용해야 jQuery.append()합니다 <head>.

$("head").append('<script type="text/javascript" src="' + script + '"></script>');

그러나이 방법에도 문제가 있습니다. 가져온 JavaScript 파일에서 오류가 발생하면 Firebug (및 Firefox 오류 콘솔 및 Chrome 개발자 도구 )도 잘못된 위치를보고하므로 Firebug를 사용하여 추적하는 경우 큰 문제입니다 JavaScript 오류가 많이 발생합니다 (그렇습니다). Firebug는 어떤 이유로 새로로드 된 파일에 대해 단순히 알지 못하므로 해당 파일에서 오류가 발생하면 기본 HTML 파일 에서 발생한 것으로보고 하여 오류의 실제 원인을 찾는 데 어려움을 겪습니다.

그러나 이것이 문제가되지 않으면이 방법이 효과적입니다.

실제로이 방법을 사용하는 $ .import_js () 라는 jQuery 플러그인을 작성했습니다 .

(function($)
{
    /*
     * $.import_js() helper (for JavaScript importing within JavaScript code).
     */
    var import_js_imported = [];

    $.extend(true,
    {
        import_js : function(script)
        {
            var found = false;
            for (var i = 0; i < import_js_imported.length; i++)
                if (import_js_imported[i] == script) {
                    found = true;
                    break;
                }

            if (found == false) {
                $("head").append('<script type="text/javascript" src="' + script + '"></script>');
                import_js_imported.push(script);
            }
        }
    });

})(jQuery);

따라서 JavaScript를 가져 오려면 다음을 수행하십시오.

$.import_js('/path_to_project/scripts/somefunctions.js');

또한 Example 에서 간단한 테스트를 수행했습니다 .

main.js기본 HTML에 파일 이 포함 된 다음 스크립트 가 추가 파일을 가져 오는 main.js데 사용 $.import_js()합니다.included.js 합니다.이 은이 함수를 정의합니다.

function hello()
{
    alert("Hello world!");
}

그리고 포함 직후 included.js 에 hello()함수가 호출되고 경고가 표시됩니다.

(이 답변은 e-satis의 의견에 대한 답변입니다).

답변

내 의견으로는 훨씬 깨끗하다는 또 다른 방법은 <script>태그 를 사용하는 대신 동기 Ajax 요청을하는 것입니다 . 또한 어떻게Node.js 가 include를 처리 있습니다.

다음은 jQuery를 사용하는 예입니다.

function require(script) {
    $.ajax({
        url: script,
        dataType: "script",
        async: false,           // <-- This is the key
        success: function () {
            // all good...
        },
        error: function () {
            throw new Error("Could not load script " + script);
        }
    });
}

그런 다음 일반적으로 include를 사용할 때 코드에서 사용할 수 있습니다.

require("/scripts/subscript.js");

다음 줄에서 필요한 스크립트에서 함수를 호출 할 수 있습니다.

subscript.doSomethingCool();

답변

좋은 소식이 있습니다. 곧 JavaScript 코드를 쉽게로드 할 수 있습니다. JavaScript 코드 모듈을 가져 오는 표준 방법이되고 핵심 JavaScript 자체의 일부가됩니다.

파일에서 import cond from 'cond.js';이름이 지정된 매크로를로드 하기 만하면 cond됩니다 cond.js.

따라서 JavaScript 프레임 워크에 의존하거나 Ajax 호출 을 명시 적으로 지정할 필요가 없습니다 .

인용하다:

답변

JavaScript 태그를 동적으로 생성하여 다른 JavaScript 코드 내부에서 HTML 문서에 추가 할 수 있습니다. 타겟 JavaScript 파일이로드됩니다.

function includeJs(jsFilePath) {
    var js = document.createElement("script");

    js.type = "text/javascript";
    js.src = jsFilePath;

    document.body.appendChild(js);
}

includeJs("/path/to/some/file.js");

답변

명령문 import은 ECMAScript 6에 있습니다.

통사론

import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import name , { member [ , [...] ] } from "module-name";
import "module-name" as name;