npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mornya/dynamic-load-libs

v0.3.4

Published

The project of Dynamic Loadable script and style library.

Downloads

61

Readme

Dynamic Load Libs

npm node types downloads license

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