다른 JavaScript 파일에 JavaScript 파일을 포함하려면 어떻게 해야 합니까?

by

다른 JavaScript 파일에 JavaScript 파일을 포함하려면 어떻게 해야 합니까?@importCSS에서요?



질문에 대한 답변



이전 버전의 JavaScript에서는 Import, 포함 또는 필수가 없었기 때문에 이 문제에 대한 다양한 접근법이 개발되었습니다.

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

오래된 브라우저와의 호환성을 위해 웹팩이나 롤업과 같은 빌드 도구나 바벨과 같은 변환 도구를 사용할 수 있습니다.

ES6 모듈

ECMAScript(ES6) 모듈은 v8.5 이후 Node.js에서 지원되며,--experimental-modules플래그가 없는 Node.js v13.8.0 이상이기 때문입니다.「ESM」을 유효하게 한다(vs.Node.js의 이전 CommonJS 스타일 모듈시스템 [“CJS”]를 사용하는 경우"type": "module"에package.json또는 파일 확장자를 지정합니다..mjs( 마찬가지로 Node.js의 이전 CJS 모듈로 작성된 모듈에도 이름을 붙일 수 있습니다..cjs기본값이 ESM인 경우)

사용.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 모듈을 직접 로드할 수 있습니다(Webpack 등의 툴은 필요 없음).캐니유즈에서 현재 지원 상태를 확인합니다.Node.js’는 사용할 필요가 없습니다..mjs확장자: 브라우저는 모듈/브라우저 상의 파일 확장자를 완전히 무시합니다.

<script type="module">
import { hello } from './hello.mjs'; // Or the extension could be just `.js`
hello('world'); </script> 
// hello.mjs -- or the extension could be just `.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/ 를 참조해 주세요.

브라우저에서의 동적 Import

동적 Import를 사용하면 스크립트는 필요에 따라 다른 스크립트를 로드할 수 있습니다.

<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 모듈 스타일은 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또, 버그, 해킹, 및 시큐러티 문제에의 대처도 개시하고 있습니다.

가져오기 로드

Dynamic Imports와 마찬가지로 1개 또는 여러 개의 스크립트를 로드하여fetch콜은 Fetch Inject 라이브러리를 사용하여 스크립트의 종속성에 대한 실행 순서를 제어하기로 약속합니다.

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

j쿼리 로드

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>페이지 머리 부분에 태그를 붙입니다.srcattribute는 첫 번째 파라미터로 함수에 지정된 URL로 설정됩니다.

다음 두 가지 솔루션에 대해 JavaScript Madness에서 설명하고 설명합니다. 동적 스크립트 로드

스크립트 실행 시간 감지

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

즉, 이러한 트릭을 직접 사용하면 새로 로드한 코드를 로드 요청 후 다음 줄에 사용할 수 없습니다. 왜냐하면 아직 로드 중이기 때문입니다.

예를 들어 다음과 같습니다.my_lovely_script.js포함하다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

그런 다음 을 눌러 페이지를 새로고침합니다.그리고 효과가 있다!헷갈려…

그럼 어떻게 해야 하죠?

제가 드린 링크에 있는 저자의 해킹을 이용하시면 됩니다.요약하면 급한 사람들을 위해 스크립트를 로드했을 때 이벤트를 사용하여 콜백 기능을 실행합니다.원격 라이브러리를 사용하여 모든 코드를 콜백 함수에 넣을 수 있습니다.예를 들어 다음과 같습니다.

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 loading에 대해 일반적으로 설명하는 훌륭한 기사가 있습니다.

소스 코드 병합/전처리

이 답변의 선두에서 설명한 바와 같이 많은 개발자들은 프로젝트에서 Parcel, Webpack, Babel 등의 빌드/변환 툴을 사용하여 향후 출시될 JavaScript 구문을 사용하거나 이전 브라우저에 대한 하위 호환성을 제공하거나 파일을 결합하거나 최소화하고 코드 분할을 수행할 수 있습니다.



보다 고도의 것을 찾고 있는 유저가 있는 경우는, 「Require」를 시험해 주세요.JS. 종속성 관리, 더 나은 동시성, 중복 방지(즉, 스크립트를 두 번 이상 검색) 등의 이점을 추가로 얻을 수 있습니다.

JavaScript 파일을 “모듈”로 작성한 후 다른 스크립트에서 종속성으로 참조할 수 있습니다.또는 Require를 사용할 수 있습니다.JS는 단순한 “이 스크립트를 가져옵니다” 솔루션입니다.

예제:

종속성을 모듈로 정의합니다.

some-dependency.displaces.displaces

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는 일부 의존성에 의존하는 “메인” JavaScript 파일입니다.

require(['some-dependency'], function(dependency) {
//Your script goes here
//some-dependency.js is fetched.
//Then your script is executed });

GitHub README에서 발췌:

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

RequireJs는 플레인스크립트 태그를 사용하여 모듈/파일을 로드하기 때문에 디버깅이 용이합니다.기존 JavaScript 파일을 로드하는 데 사용할 수 있으므로 JavaScript 파일을 다시 쓸 필요 없이 기존 프로젝트에 추가할 수 있습니다.

…



실제로 자바스크립트 파일을 비동기식으로 로드하지 않는 방법이 있기 때문에 새로 로드한 파일에 포함된 기능을 바로 사용할 수 있으며, 모든 브라우저에서 사용할 수 있다고 생각합니다.

를 사용해야 합니다.jQuery.append()에서<head>페이지 요소, 즉 다음과 같습니다.

$("head").append($("<script></script>").attr("src", url));
/* Note that following line of code is incorrect because it doesn't escape the
* HTML attribute src correctly and will fail if `url` contains special characters:
* $("head").append('<script src="' + url + '"></script>');
*/

그러나 이 방법에도 문제가 있습니다. Import된 JavaScript 파일에서 오류가 발생하면 Firebug(Firefox Error Console 및 Chrome Developer Tools도 마찬가지)가 위치를 잘못 보고합니다.이것은 Firebug를 사용하여 JavaScript 오류를 많이 추적하면 큰 문제가 됩니다(I do.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></script').attr('src', script));

import_js_imported.push(script);
 }
}
});
})(jQuery);

따라서 JavaScript를 Import하려면 다음 작업만 하면 됩니다.

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

예시로 간단한 테스트도 만들었습니다.

그 중에는main.js메인 HTML에 파일을 저장하고 다음으로 스크립트를 입력합니다.main.js사용하다$.import_js()라는 추가 파일을 가져오다included.js다음 함수를 정의합니다.

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

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

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



또 다른 방법은, 내 생각에, 훨씬 더 깔끔한 것은, Ajax를 사용하는 대신 동기화된 요청을 하는 것이다.<script>tag. 이것이 Node.js의 처리방법이기도 합니다.

다음은 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 코드 내부에서 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");