jsmediatags
jsmediatags copied to clipboard
aadsm
ES Module Imports from the Browser
Is there a way that I can import the jsmediatags object using the import syntax for ES Modules, in the browser? I was hoping to use an experience similar to the one provided in this article about the import statement.
This isn't working at the moment, but something similar to this is what I was hoping to be able to do inside of my ES Module scripts.
import jsmediatags from "https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js";
Thanks!
In fact, many of the new ES6 syntaxes are not fully supported in current browsers. You may need Babel, or add type="model" to
In fact, many of the new ES6 syntaxes are not fully supported in current browsers. You may need Babel, or add type="model" to
Yes, that's a good point, loading it with a standard <script> tag works just fine, but then the jsmediatags object isn't directly coupled with my own modules added with <script type="module">, instead I would have to access it using window.jsmediatags, which isn't quite what I was hoping for.
Essentially, this is how import could be called for jsmediatags, allowing you to use it directly inside of your module code:
<!-- index.html -->
<body>
<script type="module" src="app.js"></script>
</body>
/* app.js */
import jsmediatags from "./jsmediatags.min.js";
console.log(jsmediatags);
// {read: ƒ, Reader: ƒ, Config: ƒ}
console.log(window.jsmediatags);
// undefined
And other than support in Workers, all modern browsers actually support the import and export syntax now! So this will work without Babel or another bundler.
I'd like this feature too.
I'm not fond of using require or copying a js file into my directory and grabbing it from the global object.
Alright, I have some progress for this goal! Been working on my own fork of the project to add ESM, TypeScript, and native browser support out of the box. There's still plenty of work to be done, but a lot of things have already been moved over.
The main challenge has been moving the Jest tests over to ESM TypeScript, which isn't straightforward because most of Jest's tooling expects using CommonJS directly, or Babel to transpile any other syntaxes back down to CommonJS again so Jest can run it. It would be nice to run things directly as how they output, rather than needing a transpile step again, just for testing.
If anyone else has any interest in moving this up to the main library as well, feel free to stop by and see how things are going over at my fork here. https://github.com/Offroaders123/jsmediatags
I have also moved all of the callback APIs over to Promises, and I plan to move the number array handling for bytes, over to TypedArrays, which I think will help a big deal with speed and performance.