Module loading implementation in ES6

 1. Browser loading

Note: The default language of browser scripts is JS, so type="application/javascript". Therefore, it can be omitted. The rendering engine will stop when it encounters the <script> tag, and continue to render down after the script is executed.

1.1 Loading rules

Explanation: The browser loads the ES6 module, which also uses the script tag, but it needs to add the type="module" attribute. This is asynchronous loading, which will not cause the browser to be blocked. Wait until the entire page is rendered, and then execute the module script, which is equivalent to using defer attribute. defer means "execute after rendering", and async means "execute after downloading".

<script src="url" defer></script>
<script src="url" async></script> 
<!-- defer是渲染完再执行，async是下载完就执行 -->

2. Differences between ES6 modules and CommonJS modules

1. CommonJS modules output a copy of a value, while ES6 modules output a reference to a value.
2.  CommonJS modules are loaded at runtime, and ES6 modules are output interfaces at compile time.
3. The require() of the CommonJS module loads the module synchronously, and the import command of the ES6 module loads it asynchronously, and there is an independent parsing phase of module dependencies.

3. Module loading method of Node.js

illustrate:

js has two types of modules, one is the ES6 module, referred to as ESM; the other is the CommonJS module, referred to as CJS.

CommonJS modules are Node.js specific and are not compatible with ES6 modules. Syntax CommonJS modules above use require() and module.exports, and ES6 modules use import and export.

But Node.js has turned on ES6 module support by default. Node.js requires ES6 modules to use the .mjs suffix file name. In other words, as long as import or export is used in the script file. If you don't want to change the suffix name to .mjs, you can specify the type field as module in the project's package.json file. .mjs files are always loaded as ES6 modules, .cjs files are always loaded as CommonJS modules, and the loading of .js files depends on the setting of the type field in package.json.

4.package.json and main fields

Description: The package.json file has two fields to specify the entry file of the module; main and exports. For a relatively simple module, you can only use main to specify the entry file loaded by the module.

  {   
    
        "main":"url"
    } 

5. The exports field of package.json

Note: The exports field has a higher priority than the main field. It has many uses. Aliases for scripts or subdirectories can be specified.

 {
        "exports":{
            "./src":"./src"
            // 第一个是新名字,第二个是旧名字
        }
    } 

 6. Alias ​​of main

Note: If the alias of the exports field is ., it represents the main entry of the module, with a higher priority than the main field, and can be directly written as the value of the exports field.

 {
        "exports":{
            ".":"./src"
        }
    }
//相等
      {
        "exports":"./url"
      }

7. Conditional loading

Description: Using .alias, you can specify different entries for ES6 modules and CommonJS.

{
  "type": "module",
  "exports": {
    ".": {
      "require": "./main.cjs",
      "default": "./main.js"
    }
  }
} 

8. ES6 module loads CommonJS module

Note: The import command of the ES6 module can load the CommonJS module, but it can only be loaded as a whole.

9. Support modules in two formats

"exports"：{
  "require": "./url"，
  "import": "./url"
}

10. CommonJS module loading principle

Explanation: A module of CommonJS is a script file. The require command loads the script for the first time, executes the entire script, and then generates an object in memory. No matter how many times the CommonJS module is loaded, it will only run once when it is loaded for the first time, and if it is loaded later, it will return the result of the first run, unless the system cache is manually cleared.