systemjs - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #typescript #golang #go #android #macos #windows #awesome #openai #mcp #open-source

systemjs

(★ 13,091)

동적 ES 모듈 로더

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug.md
  - feature-request.md
  - question.md
- - size-impact.yml
  - test.yml
- FUNDING.yml
- - amd.js
  - amd.min.js
  - amd.min.js.map
  - dynamic-import-maps.js
  - dynamic-import-maps.min.js
  - dynamic-import-maps.min.js.map
  - global.js
  - global.min.js
  - global.min.js.map
  - module-types.js
  - module-types.min.js
  - module-types.min.js.map
  - named-exports.js
  - named-exports.min.js
  - named-exports.min.js.map
  - named-register.js
  - named-register.min.js
  - named-register.min.js.map
  - transform.js
  - transform.min.js
  - transform.min.js.map
  - use-default.js
  - use-default.min.js
  - use-default.min.js.map
- s.js
- s.min.js
- s.min.js.map
- system-node.cjs
- system.js
- system.min.js
- system.min.js.map
- api.md
- errors.md
- hooks.md
- import-maps.md
- module-types.md
- nodejs.md
- system-register.md
- README.md
- - amd.js
  - dynamic-import-maps.js
  - global.js
  - module-types.js
  - named-exports.js
  - named-register.js
  - transform.js
  - use-default.js
- - depcache.js
  - fetch-load.js
  - import-maps.js
  - node-fetch.js
  - registry.js
  - resolve.js
  - script-load.js
  - worker-load.js
- common.js
- err-msg.js
- package.json
- s.js
- system-core.js
- system-node.js
- system.js
- - amd.js
  - base-href.js
  - core.js
  - dynamic-import-maps.js
  - named-exports.js
  - named-register.js
  - transform.js
  - worker.js
- - url-resolution-cases.json
- import-map.mjs
- mocha-setup.js
- server.mjs
- system-core.mjs
- system-node.mjs
- test-base-href.html
- test.html
- url-resolution.mjs
.agignore
.gitignore
CHANGELOG.md
chompfile.toml
LICENSE
package.json
README.md
terser.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# SystemJS
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/systemjs/systemjs?utm\_source=badge&utm\_medium=badge&utm\_campaign=pr-badge&utm\_content=badge)
[![Backers on Open Collective](https://opencollective.com/systemjs/backers/badge.svg)](https://raw.githubusercontent.com/systemjs/systemjs/main/)
[![Sponsors on Open Collective](https://opencollective.com/systemjs/sponsors/badge.svg)](https://raw.githubusercontent.com/systemjs/systemjs/main/)
[![Downloads on JS Delivr](https://data.jsdelivr.com/v1/package/npm/systemjs/badge)](https://www.jsdelivr.com/package/npm/systemjs)
SystemJS는 후킹 가능한 표준 기반 모듈 로더입니다. 브라우저의 네이티브 ES 모듈 프로덕션 워크플로용으로 작성된 코드([Rollup 코드 분할 빌드](https://rollupjs.org/guide/en#code-splitting) 등)를 [System.register 모듈 형식](docs/system-register.md)으로 트랜스파일하여, 네이티브 모듈을 지원하지 않는 구형 브라우저에서도 동작하도록 하는 워크플로를 제공합니다. 이를 통해 [거의 네이티브에 준하는 모듈 속도](#performance)로 실행되면서도, 최상위 await(top-level await), 동적 import, 순환 참조 및 라이브 바인딩, import.meta.url, 모듈 형식, import 맵, 무결성 및 콘텐츠 보안 정책(Content Security Policy)을 지원하며 IE11까지의 구형 브라우저 호환성을 제공합니다.
## 스폰서
[![](https://opencollective.com/systemjs/sponsor/0/avatar.svg)](https://opencollective.com/systemjs/sponsor/0/website)
[![](https://opencollective.com/systemjs/sponsor/1/avatar.svg)](https://opencollective.com/systemjs/sponsor/1/website)
[![](https://opencollective.com/systemjs/sponsor/2/avatar.svg)](https://opencollective.com/systemjs/sponsor/2/website)
[![](https://opencollective.com/systemjs/sponsor/3/avatar.svg)](https://opencollective.com/systemjs/sponsor/3/website)
[![](https://opencollective.com/systemjs/sponsor/4/avatar.svg)](https://opencollective.com/systemjs/sponsor/4/website)
[![](https://opencollective.com/systemjs/sponsor/5/avatar.svg)](https://opencollective.com/systemjs/sponsor/5/website)
[![](https://opencollective.com/systemjs/sponsor/6/avatar.svg)](https://opencollective.com/systemjs/sponsor/6/website)
[![](https://opencollective.com/systemjs/sponsor/7/avatar.svg)](https://opencollective.com/systemjs/sponsor/7/website)
[![](https://opencollective.com/systemjs/sponsor/8/avatar.svg)](https://opencollective.com/systemjs/sponsor/8/website)
[![](https://opencollective.com/systemjs/sponsor/9/avatar.svg)](https://opencollective.com/systemjs/sponsor/9/website)
> \*\*[스폰서가 되어](https://opencollective.com/systemjs#sponsor) SystemJS를 지원해 주세요.\*\* 여기에 귀하의 로고와 웹사이트 링크가 표시됩니다.
## 후원자
모든 후원자분들께 감사드립니다! 🙏 [[후원자 되기](https://opencollective.com/systemjs#backer)]
[![](https://opencollective.com/systemjs/backers.svg?width=890)](https://opencollective.com/systemjs#backers)
### 개요
#### 1. s.js 최소형 프로덕션 로더
최소 크기의 [2.8KB s.js 프로덕션 로더](dist/s.min.js)는 다음과 같은 기능을 포함합니다:
\* `System.register` 모듈 로드, 즉 CSP 호환 [SystemJS 모듈 형식](docs/system-register.md) 지원.
\* `
```
### System.import를 이용한 로딩
또한 `System.import()`를 사용하여 언제든지 동적으로 모듈을 로드할 수 있습니다:
```js
System.import('/js/main.js');
```
여기서 `main.js`는 System.register 모듈 형식으로 사용 가능한 모듈입니다.
### 번들링 워크플로
번들링 워크플로의 예제는 Rollup 코드 분할 스타터 프로젝트(https://github.com/rollup/rollup-starter-code-splitting)를 참조하세요.
System 모듈을 빌드할 때는 일반적으로 다음과 같은 익명 `System.register` 구문이 생성되도록 해야 합니다:
```js
System.register([], function () { ... });
```
이러한 구문은 일반 ES 모듈과 동일하게 동작하는 방식으로 로드될 수 있으며, 다음과 같은 이름이 지정된 register 구문은 \*\*아닙니다\*\*:
```js
System.register('name', [], function () { ... });
```
이름이 지정된 register 확장 프로그램을 통해 이러한 구문도 지원할 수 있지만, 이 방식은

ach는 일반적으로 현대적인 모듈 워크플로우에는 권장되지 않습니다.
### Import Maps
`main.js`가 `'lodash'` 로딩에 의존한다고 가정하면, 다음과 같이 import map을 정의할 수 있습니다:
```html
```
### IE11 지원
관련 폴리필(polyfill)을 사용할 수 있는 경우, IE11은 계속해서 완전히 지원됩니다.
필요한 주요 폴리필은 `Promise` 폴리필입니다. import maps를 사용하는 경우 `fetch` 폴리필도 필요합니다.
이 둘은 예를 들어 [Bluebird Promises](http://bluebirdjs.com/docs/getting-started.html)와 [GitHub Fetch Polyfill](https://github.github.io/fetch/)을 Unpkg를 통해 조건부로 로드할 수 있습니다:
```html
```
이 코드는 SystemJS 스크립트 자체보다 \_앞에\_ 위치해야 합니다. 위 코드는 이러한 폴리필이 `Promise`와 `fetch`를 지원하지 않는 구형 브라우저에서만 로드되도록 보장합니다.
#### IE11에서의 Import Maps 지원에 대한 참고 사항
외부 import maps(`src=""` 속성이 있는 경우)를 사용할 때는 IE11 전용 우회 방법을 사용해야 할 수 있습니다. 브라우저는 초기 HTML 페이지를 파싱하는 동안 ``을 볼 때 네트워크 요청을 만들지 않아야 합니다. 하지만 IE11은 그렇게 동작합니다. [Codesandbox 데모](https://codesandbox.io/s/vibrant-black-xiok4?file=/index.html)
일반적으로 SystemJS가 fetch/xhr을 통해 import map에 대한 추가 요청을 수행하므로 이는 문제가 되지 않습니다. 하지만 첫 번째 요청 이후 파일이 캐시될 때 문제가 발생할 수 있습니다. IE11로 인해 발생한 첫 번째 요청은 기본적으로 Origin 요청 헤더를 전송하지 않기 때문입니다. 요청에 CORS가 필요한 경우, Origin 요청 헤더가 없으면 (AWS Cloudfront를 포함한) 많은 웹 서버가 응답 CORS 헤더를 생략하게 됩니다. 이로 인해 리소스가 CORS 헤더 없이 캐시될 수 있으며, 이는 나중에 발생하는 SystemJS의 `fetch()`가 CORS 검사로 인해 실패하는 원인이 됩니다.
이는 ``에 `crossorigin="anonymous"` 속성을 추가하여 해결할 수 있습니다.