load in vanilla ES5 js file into ES6 environment via import

Question

Scenario

As part of my prototyping process I wanted to bring in tween.js which I can do using a <script> tag on the html portion but I'd like to import this vanilla es5 file directly to my es6 files for various reasons.

What I'd like to do is something like

import * as TWEEN from 'import * as TWEEN from 'https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.7.0/Tween.min.js'

While that seems to load the remote file I don't seem to get methods like TWEEN.Tween etc etc. I suspect all the es5 is disposed of in some sort of closure vacuum > garbage collection.

Question

I realize I can clone this file locally but I'm hoping to streamline my one-off style prototyping by importing cdn files that aren't always es6 friendly. Is this feasible ?

Answer 1

If you would like to inject Tween.min.js which is hosted on CDN via script tag, it will be UMD module, which is not compatible with ESM modules.

But, instead of importing it like you describe above, you can use/call it via window object:

window.TWEEN inside your esm modules.

When Tween.min.js will be loaded and executed it will be attached to window object.

Just to make sure that you are load that script first separately on HTML side, before your esm scripts/apps, otherwise window.TWEEN might be undefined.