Skip to content

MicahZoltu/browser-es-modules-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Description

This is a simple template project that shows how to use ES modules without bundling in a browser. It uses knockoutjs to show the utilization of a UMD module, but it can also leverage ES module node dependencies.

Caveats

CommonJS modules are a problem. Since they reference the require function which isn't present in the browser, and they load files synchronously (which browser doesn't support) they can't be referenced naively. Ideally, don't use CommonJS modules and encourage project maintainers to distribute ES modules in their projects.

Usage

npm install
npm run build
npm run serve

Then browse to http://localhost:8081/index.html

You'll notice that the page initially displays "Loading..." and then switches to displaying "Hello world!" once knockout is loaded and working. The code utilizes knockout's templating engine to prove that everything is in fact working correctly, and it has multiple files to show that imports are working.

How it works

ttsc is used so that we can compile with compiler plugins referenced in tsconfig.json. In this case, @zoltu/typescript-transformer-append-js-extension is the plugin we are using. That plugin will make it so all import/export statements are compiled to include the .js file suffix. This is necessary because browsers do not have the luxury of being able to follow nodejs's module resolution strategy which involves searching for files, the browser must have the exact filename so it can fetch on the first try.

We are using es-module-shims to get import maps polyfilled, which aren't yet available in any browsers. This lets us do things like import 'knockout' and have that resolve to node_modules/knockout/build/output/knockout-latest.js. You can see the import map in index.html.

With all of that setup, we are able to write pure TypeScript and serve using a static file server without any additional build steps. Once import maps land in major browsers, we'll be able to drop the es-module-shims. If TypeScript ever adds support for compiling with JS extension, then we'll be able to drop the plugin and ttsc.

About

Template project that shows how to use ES modules in a browser.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published