Add import vs. require examples

Author: arcticmatt

import_vs_require/commonjs_module.js

@@ -0,0 +1,3 @@
+console.log("commonjs_module");
+
+exports.a = 5;

import_vs_require/difference1.mjs

@@ -0,0 +1,23 @@
+// Difference #1
+// require is just a function, so you can pass any expression that 
+// evaluates to a string (e.g. a function call, a template string)
+//
+// import can only be used with a string literal
+
+// ===============================
+// ========== COMMONJS ==========
+// ===============================
+// Make sure file extension is .js, not .mjs
+// This works!
+
+// const name = "commonjs_module";
+// const obj = require(`./${name}`);
+// console.log(`obj = ${JSON.stringify(obj)}`);
+
+// =========================
+// ========== ESM ==========
+// =========================
+// Make sure file extension is .mjs, not .js
+// This does not work
+
+import { func } from `./${name}`;

import_vs_require/difference2.mjs

@@ -0,0 +1,35 @@
+// Difference #2
+// require is evaluated inline
+//
+// import is evaluated before the rest of the script
+
+// ===============================
+// ========== COMMONJS ==========
+// ===============================
+// Make sure file extension is .js, not .mjs
+// ===== Expected output =====
+// $ node difference2
+// difference2
+// commonjs_module
+// obj = {"a":5}
+// ===========================
+
+// console.log("difference2");
+
+// const obj = require("./commonjs_module");
+// console.log(`obj = ${JSON.stringify(obj)}`);
+
+// =========================
+// ========== ESM ==========
+// =========================
+// Make sure file extension is .mjs, not .js
+// ===== Expected output =====
+// $ node difference2.mjs
+// es_module
+// difference2
+// a = 5
+// ===========================
+console.log("difference2");
+
+import { a } from "./es_module.mjs";
+console.log(`a = ${a}`);

import_vs_require/difference3.mjs

@@ -0,0 +1,23 @@
+// Difference #3
+// require allows you to omit .js extensions
+//
+// import does not
+
+// ===============================
+// ========== COMMONJS ==========
+// ===============================
+// Make sure file extension is .js, not .mjs
+// This works!
+
+// const obj = require("./commonjs_module");
+// console.log(`obj = ${JSON.stringify(obj)}`);
+
+// =========================
+// ========== ESM ==========
+// =========================
+// Make sure file extension is .mjs, not .js
+// This does not work. It won't work if es_module has a .js extension and
+// "type": "module" either.
+
+import { a } from "./es_module";
+console.log(`a = ${a}`);

import_vs_require/es_module.mjs

@@ -0,0 +1,3 @@
+console.log("es_module");
+
+export const a = 5;

webpack_demo/dist/main_require.js

@@ -0,0 +1,76 @@
+!(function (e) {
+  var n = {};
+  function t(r) {
+    if (n[r]) return n[r].exports;
+    var o = (n[r] = { i: r, l: !1, exports: {} });
+    return e[r].call(o.exports, o, o.exports, t), (o.l = !0), o.exports;
+  }
+  (t.m = e),
+    (t.c = n),
+    (t.d = function (e, n, r) {
+      t.o(e, n) || Object.defineProperty(e, n, { enumerable: !0, get: r });
+    }),
+    (t.r = function (e) {
+      "undefined" != typeof Symbol &&
+        Symbol.toStringTag &&
+        Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
+        Object.defineProperty(e, "__esModule", { value: !0 });
+    }),
+    (t.t = function (e, n) {
+      if ((1 & n && (e = t(e)), 8 & n)) return e;
+      if (4 & n && "object" == typeof e && e && e.__esModule) return e;
+      var r = Object.create(null);
+      if (
+        (t.r(r),
+        Object.defineProperty(r, "default", { enumerable: !0, value: e }),
+        2 & n && "string" != typeof e)
+      )
+        for (var o in e)
+          t.d(
+            r,
+            o,
+            function (n) {
+              return e[n];
+            }.bind(null, o)
+          );
+      return r;
+    }),
+    (t.n = function (e) {
+      var n =
+        e && e.__esModule
+          ? function () {
+              return e.default;
+            }
+          : function () {
+              return e;
+            };
+      return t.d(n, "a", n), n;
+    }),
+    (t.o = function (e, n) {
+      return Object.prototype.hasOwnProperty.call(e, n);
+    }),
+    (t.p = ""),
+    t((t.s = 0));
+})([
+  function (e, n, t) {
+    console.log("index");
+    const { myEsModuleExportedFunction: r } = t(1);
+    document.body.appendChild(
+      (function () {
+        const e = document.createElement("div");
+        return (e.innerHTML = r()), e;
+      })()
+    );
+  },
+  function (e, n, t) {
+    "use strict";
+    function r() {
+      return "elephant";
+    }
+    t.r(n),
+      t.d(n, "myEsModuleExportedFunction", function () {
+        return r;
+      }),
+      console.log("es_module");
+  },
+]);