@mornya/dynamic-load-libs
Version:
The project of Dynamic Loadable script and style library.
90 lines (76 loc) • 4.64 kB
Markdown
# Dynamic Load Libs
The project of Dynamically loadable script/style library.
> This project has been created by [Vessel CLI](https://www.npmjs.com/package/@mornya/vessel).
For a simple and quick reference about it, click [here](https://mornya.github.io/documents/guide/vessel.md).
## About
동적 스크립트 및 스타일 로드 라이브러리.
## Installation
해당 모듈을 사용할 프로젝트에서는 아래와 같이 설치한다.
```bash
$ npm install --save @mornya/dynamic-load-libs
or
$ yarn add @mornya/dynamic-load-libs
```
## Usage
아래와 같이 모듈을 import하여 사용한다.
```typescript
import { DynamicLoad } from '@mornya/dynamic-load-libs';
/* ... */
```
## Methods
### `DynamicLoad.script`
로드 가능한 스크립트 파일 혹은 컨텐츠를 동적으로 `<script>` 태그를 생성하여 로드 후 평가되도록 한다.
> 이미 동일 ID로 스크립트가 로드되었다면 다시 실행시키지 않는다. `DynamicLoad.script` 실행 후 리턴되는 Promise 결과 값이 `true`인 경우 스크립트가 로드되어 실행된 것이고, `false`라면 이미 동일 ID로 스크립트가 로드되어 있다는 것이다.
```typescript
import { DynamicLoad } from '@mornya/dynamic-load-libs';
DynamicLoad.script({
id: 'jQueryLibrary',
src: 'https://code.jquery.com/jquery-migrate-1.0.0.min.js',
})
.then(result => console.log(result))
.catch()
```
엘리먼트로 전달 가능한 각 속성값은 아래와 같다.
* `id`: 생성된 엘리먼트에 지정할 ID (required)
* `src` or `text`: 대상 소스가 URL일 경우 `src`에 경로를 명시하고, 그렇지 않고 직접 문자열을 넣어 실행하고자 할 때 `text`를 사용
* `type`: 스크립트의 경우 "module" 등 혹은 MIME 타입을 명시하기 위해 사용
* `crossOrigin`: CORS 설정
* `integrity`: user agent가 가져온 리소스가 조작없이 전송되었는지 확인하는 데 사용되는 메타데이터 문자열
* `referrerPolicy`: 스크립트를 불러올 때 보낼 리퍼러 혹은 스크립트에서 가져온 리소스
* `nonce`: 암호화된 일회용 숫자
* `isReload`: 해당 ID의 스크립트 재적재가 필요할 경우 true로 설정
* `noModule`: ES6를 지원하는 브라우저에서 모듈 스크립트를 실행하지 않도록 함 (default: false)
### `DynamicLoad.style`
로드 가능한 CSS 파일 혹은 컨텐츠를 동적으로 `<link>` 태그를 생성하여 로드 한다.
> 이미 동일 ID로 스타일이 로드되었다면 다시 추가하지 않는다. `DynamicLoad.style` 실행 후 리턴되는 Promise 결과 값이 `true`인 경우 스타일이 불러와져 있는 상태이고, `false`라면 이미 동일 ID로 스타일이 로드되어 있다는 것이다.
```typescript
import { DynamicLoad } from '@mornya/dynamic-load-libs';
DynamicLoad.style({
id: 'jQueryMobileThemeStyle',
src: 'https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css',
})
.then(result => console.log(result))
.catch()
```
엘리먼트로 전달 가능한 각 속성값은 아래와 같다.
* `id`: 생성된 엘리먼트에 지정할 ID (required)
* `src` or `text`: 대상 소스가 URL일 경우 `src`에 경로를 명시하고, 그렇지 않고 직접 문자열을 넣어 실행하고자 할 때 `text`를 사용
* `type`: MIME 타입을 명시하기 위해 사용 (default: "text/css")
* `crossOrigin`: CORS 설정
* `integrity`: user agent가 가져온 리소스가 조작없이 전송되었는지 확인하는 데 사용되는 메타데이터 문자열
* `referrerPolicy`: 스크립트를 불러올 때 보낼 리퍼러 혹은 스크립트에서 가져온 리소스
* `nonce`: 암호화된 일회용 숫자
* `isReload`: 해당 ID의 스크립트 재적재가 필요할 경우 true로 설정
* `media`: 링크된 리소스에 적용될 media를 명시
* `isAlternate`: 대체 스타일시트임을 명시할 때 사용 (rel="alternate stylesheet")
* `imageSizes`: "image/*" MIME 타입으로 지정시 해당 이미지의 사이즈를 지정
* `preloadAs`: preloadAs="font"의 경우 \<link rel="preload" as="font"\> 등으로 지정됨
## Change Log
프로젝트 변경사항은 [CHANGELOG.md](CHANGELOG.md) 파일 참조.
## License
프로젝트 라이센스는 [LICENSE](LICENSE) 파일 참조.