While you may not see this syntax a lot, you don’t actually need to name anything in the import statement. There is a syntax to import a module entirely for its side effects:
import "url/to/library.js";
This syntax works fine for libraries that use globals, since declaring a global is essentially a side effect, and all modules share the same global scope. For this to work, the imported library needs to satisfy the following conditions:
It should declare the global as a property on window (or self), not via var Foo or this. In modules top-level variables are local to the module scope, and this is undefined, so the last two ways would not work.
Its code should not violate strict mode
The URL is either same-origin or CORS-enabled. While Githubissues.
Githubissues is a development platform for aggregating issues.
I tried the following and doesn't work.
https://cdn.jsdelivr.net/npm/@indic-transliteration/sanscript@1.3.1/+esm
Trying to use this without a bundler - direct import in a js/ts module like import 'https://cdn.jsdelivr.net/npm/@indic-transliteration/sanscript@1.3.1/+esm'. This avoids including scripts in your main SPA html - can be just included in the component that needs.
Unfortunately, this library needs some tweaks to make this work.
Some background here https://lea.verou.me/blog/2020/07/import-non-esm-libraries-in-es-modules-with-client-side-vanilla-js/ Technically, a JS file can be parsed as a module even with no imports or exports. Therefore, almost any library that uses globals can be fair game, it can just be imported as a module with no exports! How do we do that?
While you may not see this syntax a lot, you don’t actually need to name anything in the import statement. There is a syntax to import a module entirely for its side effects:
import "url/to/library.js"; This syntax works fine for libraries that use globals, since declaring a global is essentially a side effect, and all modules share the same global scope. For this to work, the imported library needs to satisfy the following conditions:
It should declare the global as a property on window (or self), not via var Foo or this. In modules top-level variables are local to the module scope, and this is undefined, so the last two ways would not work. Its code should not violate strict mode The URL is either same-origin or CORS-enabled. While Githubissues.