다른 JavaScript 파일에 JavaScript 파일을 포함시키는 방법은 무엇인가요?

CSS에서 @import와 유사한 방법으로 JavaScript 파일을 다른 JavaScript 파일에 포함하는 방법은 무엇인가요?

답변 1

옛 버전의 JavaScript에는 import, include, 또는 require이 없었기 때문에 이 문제에 대한 다양한 접근 방식이 개발되었습니다.

하지만 2015년 이후부터 (ES6), JavaScript는 Node.js에서 모듈을 가져오기위한 ES6 modules 표준을 가지고 있으며, 이것은 most modern browsers 에서도 지원됩니다.

오래된 브라우저와 호환성을 위해서는 Webpack 및 Rollup 같은 빌드 도구 또는 Babel 같은 트랜스파일 도구를 사용할 수 있습니다.

ES6 모듈

ECMAScript (ES6) 모듈은 v8.5 이후에 --experimental-modules 플래그로, 그리고 적어도 Node.js v13.8.0 이후에는 플래그 없이 supported in Node.js 되었습니다. ESM을 활성화하기 위해서는 package.json 에서 type: module 를 사용하거나 파일에 .mjs 확장자를 지정해야합니다. (마찬가지로, Node.js의 이전 CJS 모듈로 작성된 모듈은 ESM이 기본인 경우 .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 모듈

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

// 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/에서 더 읽어보세요.

브라우저에서 동적 임포트

동적 임포트는 스크립트가 필요할 때 다른 스크립트를 로드할 수 있게합니다.

https://developers.google.com/web/updates/2017/11/dynamic-import에서 더 읽기

노드.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 호출을 사용하여 프로미스를 사용하여 스크립트 종속성에 대한 실행 순서를 제어하여 하나 이상의 스크립트를로드 할 수 있습니다. 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)}`)

})

제이쿼리 로딩

#$^ *@^ * &$ &$ 라이브러리는 로딩 기능을 제공합니다. #$ # $ ^ * & @ $ & :

$.getScript(my_lovely_script.js, function() {

alert(Script loaded but not necessarily executed.);

});

동적 스크립트 로딩

HTML에 스크립트 URL을 가진 스크립트 태그를 추가할 수 있습니다. jQuery의 오버헤드를 피하기 위해서, 이것은 이상적인 해결책입니다.

스크립트는 다른 서버에 위치할 수도 있습니다. 더욱이, 브라우저는 코드를 평가합니다. 태그 바로 앞에 삽입될 수 있습니다.

이것이 어떻게 작동할 수 있는지에 대한 예제입니다.

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)

}

이 함수는 첫 번째 매개변수로 주어진 URL을 src 속성으로 설정하고 페이지의 head 섹션 끝에 새로운

위의 코드에서 your_file.js는 포함시키고자 하는 자바스크립트 파일의 파일 이름입니다.

다음으로, 포함시킨 자바스크립트 파일과 함께 작성한 자바스크립트 파일에서 변수나 함수를 사용할 수 있습니다. 이 경우, 포함시킨 파일이 먼저 실행되어야 하므로 HTML 파일에서 먼저 포함시켜야 할 파일을 먼저 불러와야 합니다.

예를 들어, your_file.js 파일에서 다음과 같은 코드가 있다고 가정합니다.

function greet() {

console.log(Hello World!);

}

이제, 자바스크립트 파일에서 이 함수를 사용하려면 다음과 같이 코드를 작성하면 됩니다.

이렇게 포함시킨 자바스크립트 파일과 함께 사용할 수 있습니다. 또한 여러 개의 자바스크립트 파일을 포함하려면 script 태그를 여러 번 사용하여 각 파일을 불러와야 합니다.

따라서, 자바스크립트 파일을 다른 자바스크립트 파일에서 포함시키려면 HTML 파일의 head 또는 body 태그 내에 script 태그를 사용해야합니다. 이렇게하면 불러온 파일에서 만든 변수와 함수를 사용할 수 있습니다. 또한, 복수의 파일을 포함하려면 각 파일을 각각 불러와야 합니다. 이러한 방법을 사용하여 자바스크립트 파일을 효과적으로 활용할 수 있습니다.