동적 가져오기()에서 전체 URL 사용
동적으로 전체 URL을 사용할 수 있습니까?import()ES6/유형 스크립트의 설명?
import('https://foo.com/mymodule.js').then(() => {
console.log('mymodule is loaded');
});
오류가 발생했습니다.
//Cannot find module 'https://foo.com/mymodule.js'.
웹 팩 및 유형 스크립트를 사용하여 동적 가져오기를 통해 이미 상대 경로를 성공적으로 사용하고 있습니다.
import(/* webpackChunkName: "mymodule" */ '../mymodule');
그래서 웹팩은 런타임에 이미 모듈 로딩을 하는 것 같습니다.
ES2020은 자바스크립트 모듈의 동적 가져오기를 허용하는 이른바 "동적 가져오기"라는 새로운 기능 유사 구문을 도입합니다.가져오기 프로세스의 정확한 구현은 호스트(예: 브라우저 또는 Node.js)에게 맡겨지지만 현대의 웹 브라우저는 URL을 사용하여 모듈을 식별하는 다음 구문을 사용하여 HTTP를 통한 동적 로드를 구현합니다.
// foo.js at example.com
export function foo() {
return 'this is foo'
}
// bar.js, running in the client
const { foo } = await import('http://example.com/my-module.js')
foo() // "this is foo"
명심해야 할 CORS 및 MIME 유형 제약 조건이 있습니다.이것과 저것은 관련이 있습니다.
번들러가 없는 순수 ES6 모듈
이제 대부분의 브라우저가 ES6 모듈을 기본적으로 지원합니다.정의해야 합니다.type="module"스크립트 태그에 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="module">
import camelCase from "http://localhost:40080/camelCase.js";
import * as systemX from "https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.4/system.js";
console.log(systemX);
console.log(camelCase);
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
또는 파일에 연결할 수도 있습니다.
<!-- move all previoous code to main.js -->
<script type="module" src="./main.js"></script>
자세한 내용:
https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
웹팩
아래 트릭을 테스트해보니 효과가 있습니다.
import(/* webpackIgnore: true */ 'http://example.com/some-module/some-module.bundle.js').then(module => console.log(module.default));
https://github.com/webpack/webpack/issues/8341#issuecomment-436550381
**두 가지 사용 사례 모두에 대해 웹 서버에서 CORS를 허용해야 합니다.
ES 모듈은 정적인 경우에도 URL을 지원하지 않습니다.import역동적이지 않은import()현재 브라우저 버전(Chrome 기반, Firefox, Safari)은 정적 및 동적 URL을 모두 지원합니다.import구현은 CORS 메커니즘에 의존하며 다양할 수 있습니다.Node.js는 사용자 지정 ESM 로더에서만 이 기능을 지원하므로 향후 보안 문제로 인해 기본적으로 이 기능을 허용하지 않을 것입니다.
타사 플러그인을 통해 웹 팩에서 HTTP 전송을 처리할 수 있습니다.
스크립트 로드는 시스템에서 처리할 수 있습니다.JS:
System.config({
paths: {
'mymodule': 'https://example.com/mymodule.js'
}
});
System.import('mymodule')
.then(mymodule => {
...
})
.catch(error => console.error(error));
또는:
System.import('https://example.com/mymodule.js')
.then(mymodule => {
...
})
.catch(error => console.error(error));
또한 SystemJS는 필요할 때 로드된 스크립트를 처리하는 기능을 제공합니다. 예를 들어, 이러한 스크립트에서 모듈을 처리해야 하는 방식입니다.
언급URL : https://stackoverflow.com/questions/50097327/using-a-full-url-in-a-dynamic-import
'programing' 카테고리의 다른 글
| 파이썬에서 경고가 예외인 것처럼 포착하려면 어떻게 해야 합니까? (0) | 2023.06.14 |
|---|---|
| Oracle에서 COMMIT에 대한 트리거를 정의하는 방법은 무엇입니까? (0) | 2023.06.14 |
| 첫 번째 문자 Vue 2에서 시작하는 요소 표시 (0) | 2023.06.14 |
| 내 단추 텍스트가 롤리팝의 모든 캡스에 강제로 적용되는 이유는 무엇입니까? (0) | 2023.06.14 |
| OpenXml sdk 2.0으로 Excel 문서 작성 (0) | 2023.06.14 |