후레임의 프로그래밍
다른 JavaScript 파일에 JavaScript 파일을 어떻게 포함합니까? 본문
질문
자바 스크립트에 CSS의 @import와 유사한 것이있어 다른 JavaScript 파일에 JavaScript 파일을 포함 할 수 있습니까?
답변
ECMAScript (ES6) 모듈은 Node.js에서 v8.5부터 --experimental-modules플래그 와 함께 지원되었으며 , 최소한 Node.js v13.8.0부터 플래그없이 지원 되었습니다 . "ESM"(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 모듈
브라우저는 ECMAScript 모듈을 직접로드 할 수 있도록 지원했습니다 (Webpack과 같은 도구가 필요하지 않음) 이후
<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-에서 자세히 알아보세요.
브라우저에서 동적 가져 오기
동적 가져 오기를 사용하면 스크립트가 필요에 따라 다른 스크립트를로드 할 수 있습니다.
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
https://developers.google.com/web에서 자세히 알아보기
Node.js에는
Node.js에서 여전히 널리 사용되는 이전 CJS 모듈 스타일은 module.exports입니다.
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
자바 스크립트가 사전 처리가 필요없는 브라우저에 외부 JavaScript 콘텐츠를 포함하는 다른 방법이 있습니다.
AJAX 로딩
AJAX 호출로 추가 스크립트를로드 한 다음 eval을 사용하여 실행할 수 있습니다.
가져 오기로드
동적 가져 오기와 마찬가지로 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에 추가 할 수 있습니다.
The script can even reside on a different server. Furthermore, the browser evaluates the code. The <script> tag can be injected into either the web page <head>, or inserted just before the closing </body> tag.
다음은 이것이 작동하는 방법의 예입니다.
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)
}
This function will add a new <script> tag to the end of the head section of the page, where the src attribute is set to the URL which is given to the function as the first parameter.
이러한 솔루션은 JavaScript Madness : Dynamic Script Loading에서 논의되고 설명됩니다.
스크립트 실행 시점 감지
이제 알아야 할 큰 문제가 있습니다.
즉, 이러한 트릭을 직접 사용하면 로드를 요청한 후 다음 줄에 새로로드 된 코드를 사용할 수 없습니다. 계속로드되기 때문입니다.
예 : 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
그런 다음
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);
}
그런 다음 스크립트가 lambda 함수에로드 된 후 사용할 코드를 작성합니다.
var myPrettyCode = function() {
// Here, do whatever you want
};
그런 다음 모든 것을 실행합니다.
loadScript("my_lovely_script.js", myPrettyCode);
스크립트는 브라우저 및 script.async = false;행을 포함했는지 여부에 따라 DOM이로드 된 후 또는 이전에 실행될 수 있습니다.
소스 코드 병합 / 전처리
이 답변의 상단에서 언급했듯이 많은 개발자는 프로젝트에서 Parcel, Webpack 또는 Babel과 같은 빌드 / 트랜스 파일 도구를 사용하여 향후 JavaScript 구문을 사용하고 이전 브라우저에 대한 하위 호환성을 제공하고 파일을 결합 할 수 있습니다.
출처 : https://stackoverflow.com/questions/950087
'스택오버플로우(Stack Overflow)' 카테고리의 다른 글
| Git을 사용하여 가장 최근 커밋을 새 브랜치로 이동 (0) | 2020.11.11 |
|---|---|
| 텍스트 선택 강조 표시를 비활성화하는 방법 (0) | 2020.11.11 |
| 양식 기반 웹 사이트 인증에 대한 확실한 가이드 (0) | 2020.11.10 |
| REST의 PUT vs POST (0) | 2020.10.26 |
| Linux에서 특정 텍스트가 포함 된 모든 파일을 찾으려면 어떻게합니까? (0) | 2020.10.26 |