wmertens/load-external-scripts

dynamically load external scripts, and report when is completed (Promise)

Load External Scripts

Small utility to load external libs. Say you need to dynamically create a script tag to load your analytics or other vendor libraries that don't belong to your app code base.

Usage

$ npm install --save load-external-scripts

why

Mainly for 3 reasons

Scenario 1

You try to load a vendor that pollutes the window with a variable that you need later. say window.analytics.

import loadScript from 'load-external-script'

loadScript({ src: 'http://...', id: 'uniqueid' })
  .then(/* Contnue with your app */)

Scenario 2

Two instances of the same class try to load the same script, like when you need a vendor for a video and you're supposed to load 2 videos on the same page.

import loadScript from 'load-external-script'

Promise.all([
  loadScript({ src: 'http://sameurl.com/vendor.js', id: 'sameID' }),
  loadScript({ src: 'http://sameurl.com/vendor.js', id: 'sameID' }),
])

Scenario 3

Your vendor is already loaded but 2 minutes later you try to load the same script, so you don't want to duplicate the tag nor actually load it again.

import loadScript from 'load-external-script'

loadScript({ src: 'http://sameurl.com/vendor.js', id: 'sameID' }),
setTimeout(function() {
  loadScript({ src: 'http://sameurl.com/vendor.js', id: 'sameID' }),
}, 5000)