[ES Modules] Missing js extensions in import statements

[phaux]

Description of the Issue and Steps to Reproduce:

When loading src/moment.js with <script type=module>:

Loading failed for the module with source “http://localhost:5000/node_modules/moment/src/lib/utils/hooks”.

Environment:

Any browser with support for ES modules.

[ashsearle]

Adding the .js file extension to all import under src/ could easily lead to a chain of up to 105-228 HTTP requests (depending on locales)

A more appropriate result might be achieved by adding esnext and module properties to package.json. From a series of articles by Axel Rauschmayer it seems like you'd want something like:

  "esnext": "src/moment.js",
  "module": "./moment.esm.js",

(where ./moment.esm.js would be a new build target, following ESM instead of CJS module format)

[chrisdothtml]

+1 for a new esm build target. For reference, Ractive.js provides an .mjs dist file

[marwahaha]

I'll take a PR on documentation about this in https://github.com/moment/momentjs.com

[brettz9]

Btw, even with a good number of HTTP requests, it can be convenient to have browser builds for use in demos--where the demos aren't forced to pollute their HTML with global script dependencies (I know it'd just be one script tag if there is an IIFE or UMD build, but a script tag is still out of place from the JS that uses it and cleaner to have a module distribution).

[marwahaha]

@brettz9 I'll look at PRs that don't break any existing users.

[ramonGonzEdu]

@brettz9 I'll look at PRs that don't break any existing users.

How could this break users? I can't think of any platform that doesn't support using the .js extension on imports. Even typescript supports it.

Regards