Place the files in a directory. Serve the files via a web server such as the built-in python http server.
Open index.html in your browser, open the DevTools Console and reload.
Last active
January 16, 2025 09:57
-
-
Save walkermatt/01e83ea99a1ea0f7ed7af9d281643df8 to your computer and use it in GitHub Desktop.
Load ES module in a html page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class App { | |
| constructor(options) { | |
| this.name = options.name; | |
| } | |
| getGreeting() { | |
| return `Hi ${this.name}!`; | |
| } | |
| } | |
| export { App }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en-GB"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Load Class from ES module</title> | |
| <link rel="icon" href="data:;base64,iVBORw0KGgo=" /> | |
| </head> | |
| <body> | |
| <script type="module"> | |
| import { App } from './app.js'; | |
| const app = new App({ | |
| name: 'Domna', | |
| }); | |
| console.log(app.getGreeting()); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment