이전 버전의 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 구문을 사용하고, 이전 브라우저에 대한 하위 호환성을 제공하고, 파일을 결합하고, 축소하고, 코드 분할 등을 수행하십시오.