Have ideas to improve npm?Join in the discussion! »

    @mornya/dynamic-load-libs
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    Dynamic Load Libs

    npm node types downloads license

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

    Install

    npm i @mornya/dynamic-load-libs

    DownloadsWeekly Downloads

    87

    Version

    0.3.1

    License

    ISC

    Unpacked Size

    12.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar