A polyfill for Safari, a shim for Chrome to make module scripts work in XHTML mode.
Contents:
You may use ES Module along with XHTML5, but in Chromium based browsers: Module scripts without the
, and in Safari: async
attribute do not load when the page is served as XHTMLModule scripts do not load when the page is served as XHTML
. See notes at caniuse.com
npm install xhtml5-esm-support
# install peer dependencies to support Safari
npm install systemjs systemjs-babel
In your XHTML5 document, put <scipt>
below after your module <script>
s
<script src="./node_modules/xhtml5-esm-support/index.js"
data-peer-dependencies="./node_modules/systemjs/dist/system.min.js systemjs, ./node_modules/systemjs-babel/dist/systemjs-babel.js systemjs-babel"></script>
<!-- specify data-peer-dependencies to support Safari -->
Notes:
- This package is not necessary for Chrome if all your module scripts were declared async
- Package "systemjs" and "systemjs-babel" are reuqired for Safari
- This package is not necessary for Firefox, but it's OK if loaded
- Don't use this package in HTML mode, but if loaded, a console warning will appear
- This package works for XHTML5, not XHTML1.0, so don't declare a DTD in DOCTYPE
-
module scripts run out of order
- It doesn't matter in most cases
-
module scripts run deferred
- You may replace code like
document.addEventListener('DOMCOntentLoaded', main);
withdocument.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', main) : main();
to make it work.
- You may replace code like
-
internal module script cannot static import or dynamic import to import other modules (Safari-only)
- you may extract internal modules as external.