//person.js
var person = {
    bipedal: true,
    species: 'homo sapiens'
}

//person.js
var person = (function(name) {
    var innerName = (!name) ? 'Anonymous' : name;
    
    return {
        name: function() {
            return innerName;
        },
        bipedal: true,
        species: 'homo sapiens'
    }
})(outerName);

module.exports = function() {
    return {
        name: innerName,
        bipedal: true,
        species: 'homo sapiens'
    }
};

define('person', function(name) {
    var innerName = (!name) ? 'Anonymous' : name;
    return {
        name: function() { return innerName; },
        bipedal: true,
        species: 'homo sapiens'
    }
});

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory(require('jquery'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //    methods
    function myFunc(){};

    //    exposed public method
    return myFunc;
}));

var person = {
    bipedal: true,
    species: 'homo sapiens'
};

export default { person };

import person from './person.js';

<!-- JS pour navigateurs "modernes" -->
<script type="module" src="main.js"></script>

<!-- JS transpilé en ES5 pour navigateurs "anciens" -->
<script nomodule src="main-legacy.js"></script>

// worker.js
importScripts('subworker.js');

//subworker.js
export const sqrt = Math.sqrt;

// Uncaught SyntaxError: Unexpected token export


//lib.js
export const sqrt = Math.sqrt;

//subworker.js
import sqrt from './lib.js';

// Uncaught SyntaxError: Unexpected token export

// Supporté
import {foo} from 'https://www.website.com/utils/bar.js';
import {foo} from '/utils/bar.js';
import {foo} from './bar.js';
import {foo} from '../bar.js';

// Non supporté
import {foo} from 'bar.js';
import {foo} from 'utils/bar.js';

<!-- This script will execute after… -->
<script type="module">
  addTextToBody("Inline module executed");
</script>

<!-- …this script… -->
<script src="1.js"></script>

<!-- …and this script… -->
<script defer>
  addTextToBody("Inline script executed");
</script>

<!-- …but before this script. -->
<script defer src="2.js"></script>

<!-- This executes as soon as its imports have fetched -->
<script async type="module">
  import {addTextToBody} from './utils.js';

  addTextToBody('Inline module executed.');
</script>

<!-- This executes as soon as it & its imports have fetched -->
<script async type="module" src="1.js"></script>

<!-- 1.js only executes once -->
<script type="module" src="1.js"></script>
<script type="module" src="1.js"></script>
<script type="module">
  import "./1.js";
</script>

<!-- Whereas normal scripts execute multiple times -->
<script src="2.js"></script>
<script src="2.js"></script>

<!-- This will not execute, as it fails a CORS check -->
<script type="module" src="https://….now.sh/no-cors"></script>

<!-- This will not execute, as one of its imports fails a CORS check -->
<script type="module">
  import 'https://….now.sh/no-cors';

  addTextToBody("This will not execute.");
</script>

<!-- This will execute as it passes CORS checks -->
<script type="module" src="https://….now.sh/cors"></script>

// Plus de 'use strict'

mistypeVariable = 17; // Uncaught ReferenceError: mistypeVariable is not defined

delete Object.prototype; // Uncaught TypeError: Cannot delete property 'prototype'

function sum(a, a, c) { // Uncaught SyntaxError: Duplicate parameter name not allowed
    return a + b + c;
}

alert(`main-bundled.js - counter: ${counter}`);

import {counter} from './increment.js';

if (Math.random()>0.5) {
      import './module1.js'; // SyntaxError: Unexpected token 'import'
}

const import2 = (import './main2.js'); // SyntaxError: Unexpected token 'import'

try {
   import './module3.js'; // SyntaxError: Unexpected token 'import'
} catch(err) {
   console.error(err);
}

const moduleNumber = 4;

import module4 from `module${moduleNumber}`; // SyntaxError: Unexpected token

//------ lib.js ------
export let counter = 3;
export function incCounter() {
    counter++;
}

//------ main.js ------
import { counter, incCounter } from './lib';

// The imported value `counter` is live
console.log(counter); // 3

incCounter();

console.log(counter); // 4

counter += 1; // Uncaught TypeError: Assignment to constant variable.

// module.js

console.log(this); // undefined

// script.js

console.log(this); // window

// vehicle.js
import { Car } from './car.js';

let id = 0;

export class Vehicle {
    constructor() {
        this.id = ++id;
    }

    static build() {
        return new Car();
    }
}


// car.js
import { Vehicle } from './vehicle.js';

export class Car extends Vehicle {
    constructor() {
        super();
        this.model = 'Generic';
    }
}

// main.js
import { Car } from './car.js';

let myCar = new Car()

console.log(myCar);

// Car {id: 1, model: "Generic"}

const isAModule = (this === undefined);

const isNotAModule = (this === window);

// WARNING , this peut aussi bien être bindé

function checkJsModulesSupport() {
  // create an empty ES module
  const scriptAsBlob = new Blob([''], {
    type: 'application/javascript'
  });
  const srcObjectURL = URL.createObjectURL(scriptAsBlob);

  // insert the ES module and listen events on it
  const script = document.createElement('script');
  script.type = 'module';
  document.head.appendChild(script);

  // return the loading script Promise
  return new Promise((resolve, reject) => {
    // HELPERS
    let isFulfilled = false;

    function triggerResolve() {
      if (isFulfilled) return;
      isFulfilled = true;
      
      resolve();
      onFulfill();
    }

    function triggerReject() {
      if (isFulfilled) return;
      isFulfilled = true;

      reject();
      onFulfill();
    }

    function onFulfill() {
      // cleaning
      URL.revokeObjectURL(srcObjectURL);
      script.parentNode.removeChild(script)
    }

    // EVENTS
    script.onload = triggerResolve;
    script.onerror = triggerReject;
    setTimeout(triggerReject, 100); // reject on timeout

    // start loading the script
    script.src = srcObjectURL;
  });
};

checkJsModulesSupport().then(
  () => {
    console.log('ES modules ARE supported');
  },
  () => {
    console.log('ES modules are NOT supported');
  }
);

// AVANT

import * as lodash from 'lodash';

// MAINTENANT

import add from '../node_modules/lodash-es/add.js';

<script nomodule src="main.legacy.js"></script>

<script type="module" src="main.js"></script>