ES6 supports native Moudle (ESM for short), before which the modularization of the front end relied on CommonJS. The intuitive difference in the use of the two is the syntax is different, but at the bottom of the processing is different, the main difference lies in the role of the two stages are not the same.

  1. CommonJS is loaded at run time, because essentially the CommonJS require is just a JS function that takes effect only when the JS engine executes code, whereas the ESM takes effect when the JS engine is statically parsing.

  2. ESM outputs value references, CommonJS outputs copies. If we declare module A in ESM, and B and C both refer to A, then A in C will change as B changes A. In this case, the CommonJS specification does not change C.

Here’s an example to think about: developing large projects on a daily basis, usually using Webpack. Whatever specification you use is integrated into a Bundle after being compiled by Webpack, and it turns out that compiled JS does the same thing as mentioned in section 2 above. So how is Webpack implemented? So let’s write a DEMO and look at it

Environment to prepare

First, set up a simple Webpack environment and create a new project. Run NPM init NPM I Webpack –save to configure Webpack

//webpack.config.js
const path = require('path');

module.exports = {
  // JavaScript executes the entry file
  entry: './main.js'.output: {
    // Combine all dependent modules into a bundle.js file
    filename: 'bundle.js'.// Put the output files in the dist directory
    path: path.resolve(__dirname, './dist'),}};Copy the code

Create an Html entry

// index.html
<html>

<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="app"></div>
  <script src="./dist/bundle.js"></script>
</body>

</html>
Copy the code

The directory is as follows:

|– index.html

|– main.js

|– webpack.config.js

ESM

The statement module

//esm.js
export let name = 'congxiaobai'
export function show(content) {
    name = content
    console.log(name)
}

Copy the code

reference

//main.js
import {show,name} from './ems'
// Execute the show function
console.log(name)
show('Webpack');
console.log(name)
Copy the code

Execution result:

congxiaobai

Webpack Webpack

Take a look at the result:

//bundle.js
(() = >{"use strict";
    let o="congxiaobai";
    console.log(o),
    o="Webpack".console.log(o),
    console.log(o)})();
Copy the code

CommonJS

The statement module

//common.js
let name = 'ws'
function show(content) {
    name = content
    console.log(name)
}

// Export the show function from the CommonJS specification
module.exports = {
    show:show,
    name:name
};

Copy the code

reference

//main.js
const show = require('./show.js');
console.log(show.name)
show.show('Webpack');
console.log(show.name)
Copy the code

The execution result

congxiaobai

Webpack

congxiaobai

//bundle.js
(() = > {
    var o = {
        298: o= > {
            let e = "congxiaobai";
            o.exports = {
                show: function (o) { e = o, console.log(e) },
                name: e
            }
        }
    },
    e = {};
    function n(r) {
        var s = e[r];
        if (void 0! == s)return s.exports;
        var t = e[r] = { exports: {}};return o[r](t, t.exports, n), t.exports
    }
    (() = > {
        const o = n(298);
        console.log(o.name),
            o.show("Webpack"),
            console.log(o.name)
    })()
})();
Copy the code

conclusion

Webpack finally compiles both specifications into immediate execution functions and implements commonJS effects through closures. 2. After compilation, there is no Moudle for the browser, it is all in a Bundle.