How do I check if a script is running as a ES6 module (so that it can `export`), in Javascript?

Question

I'd like to make a Javascript file that

exports its content (e.g. a class) if it can export (e.g. it has been loaded with <script type="module">)
and otherwise, assigns its content into the global variable such as window and global.

For example, let's assume such a file print.js.

Case A

One can use it like:

<script type="module">
    import print_things from "./print.js";
    print_things("Javascript innovation");
</script>

Case B

or,

<script src="./print.js"></script>
<script>
    print_things("Hmmmmmmm.");
</script>

Currently, using export makes the script throw an error in Case B: Uncaught SyntaxError: Unexpected token export. So it has to know whether export is available on the environment whereon it runs, in order to support the both use cases. How do I do this?

You should use webpack or similar to be able to always use `import` in ypur code, but output it without — Jonas Wilms, Jan 23 '18 at 08:28
I think you've got it the wrong way round. A file does not dynamically export something or not depending on how it is included. Rather it should be included in the right way, depending on whether it's an ES6 module or not. — Bergi, Jan 23 '18 at 08:36
@Bergi Oh, then the best way I should do would be maintaining one file for one thing, generating two separate files from it (using _Webpack_ that xjmdoo suggested), one for ES6 module users, another one for non-module users, and providing them.. Did I understand it right? — Константин Ван, Jan 23 '18 at 08:46
@K._ Yes. (Or leave applying webpack etc to your users and provide only ES6 modules) — Bergi, Jan 23 '18 at 08:55
Reminds me [How it feels to learn JavaScript in 2016](https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f)... I think I should get used to work with them. — Константин Ван, Jan 23 '18 at 09:07
Was Case B supposed to be `print_things` instead of `window.print`? — Ciro Santilli Путлер Капут 六四事, Apr 29 '21 at 12:15
@CiroSantilli新疆棉花TRUMPBANBAD I guess so. Well, I’m not sure what younger me was thinking back then. — Константин Ван, Apr 29 '21 at 12:28
Related: https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack — Ciro Santilli Путлер Капут 六四事, Apr 29 '21 at 13:38

score 1 · Answer 1 · answered Jan 23 '18 at 08:20

Check out UMD (universal module definition). Namely, this example

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'b'], function (exports, b) {
            factory((root.commonJsStrictGlobal = exports), b);
        });
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('b'));
    } else {
        // Browser globals
        factory((root.commonJsStrictGlobal = {}), root.b);
    }
}(typeof self !== 'undefined' ? self : this, function (exports, b) {
    // Use b in some fashion.

    // attach properties to the exports object to define
    // the exported module properties.
    exports.action = function () {};
}));

Is it impossible to achieve this with ES6 modules, instead of UMD (CommonJS and AMD)? — Константин Ван, Jan 23 '18 at 08:34
yep! check out the [browserify](https://babeljs.io/docs/plugins/transform-es2015-modules-umd/) plugin — xavdid, Jan 23 '18 at 08:39

score 1 · Answer 2 · answered Jan 23 '18 at 08:25

1

Browsers that understand type=module should ignore scripts with a nomodule attribute. This means you can serve a module tree to module-supporting browsers while providing a fall-back to other browsers.

<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

answered Jan 23 '18 at 08:25

xjmdoo

1,498
8
14

1

If I go with this method, do I have to have two files for one thing? – Константин Ван Jan 23 '18 at 08:29
1

Yes, but that does not mean you have to maintain two files separately. You can always use something like `webpack` to transpile your code for fallback support. – xjmdoo Jan 23 '18 at 08:35

score 1 · Answer 3 · answered May 20 '22 at 06:20

(Note: you probably shouldn't use this in the real world, but it is totally valid and does exactly what you want)
An implementation of your print.js:

function print_things(msg) {
   console.log(msg)
}
y=>0<!--y; export default print_things

<script type=module>
   // (renamed to avoid name collision)
   import print_things2 from "https://12Me21.github.io/external/print.js"
   print_things2("Javascript innovation")
</script>

<script src="https://12Me21.github.io/external/print.js"></script>
<script>
   print_things("Hmmmmmmm.")
</script>

Browsers will treat <!-- as a javascript line comment, unless it's in a module script. You can use this to "hide" code from non-modules, by adding a few extra chars to avoid a syntax error. In this example, the last line is parsed as either:

Normal script: y => 0(function) <!-- y; export ...(comment, ignored)
Module script: y => 0 < ! --y ;(function) export ...(export statement)

This is guaranteed to work in web browsers, but not node.js etc.
Here is the relevant part of the specification:

B.1.1 HTML-like Comments

... this extension is not allowed when parsing source text using the goal symbol Module: ...

I have a potentially better option now, which works in node.js: `if(0)+typeof await/2//2; export ... ` (or just `0&&await/2//2; export ... `) — 12Me21, May 21 '22 at 03:29

How do I check if a script is running as a ES6 module (so that it can `export`), in Javascript?

Case A

Case B

3 Answers3

B.1.1 HTML-like Comments