@mornya/dynamic-load-libs

Dynamic Load Libs

The project of Dynamically loadable script/style library.

This project has been created by Vessel CLI. For a simple and quick reference about it, click here.

About

동적 스크립트 및 스타일 로드 라이브러리.

Installation

해당 모듈을 사용할 프로젝트에서는 아래와 같이 설치한다.

$ npm install --save @mornya/dynamic-load-libs
or
$ yarn add @mornya/dynamic-load-libs

Usage

아래와 같이 모듈을 import하여 사용한다.

import { DynamicLoad } from '@mornya/dynamic-load-libs';

/* ... */

Methods

DynamicLoad.script

로드 가능한 스크립트 파일 혹은 컨텐츠를 동적으로 <script> 태그를 생성하여 로드 후 평가되도록 한다.

이미 동일 ID로 스크립트가 로드되었다면 다시 실행시키지 않는다. DynamicLoad.script 실행 후 리턴되는 Promise 결과 값이 true인 경우 스크립트가 로드되어 실행된 것이고, false라면 이미 동일 ID로 스크립트가 로드되어 있다는 것이다.

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로 스타일이 로드되어 있다는 것이다.

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 파일 참조.

License

프로젝트 라이센스는 LICENSE 파일 참조.