Es module and commonjs learning notes

notes ： Below esm finger ECMAScript Module , namely ES6 Module syntax of （import/export）,cjs finger CommonJS （module.exports/require）

Browser side ESM Module loading

The browser uses esm The module of grammar import/export Or load ES6 Module is through script When the label is implemented , Have to add type="module", So the browser will know that this is a ES6 modular .

Browser with type="module" Of <script> It's all asynchronous loading , It won't block the browser , Wait until the whole page is rendered , Then execute the module script , Equivalent to opening <script> Labeled defer attribute （ have access to async attribute ）

esm and cjs The difference of

esm It is loaded at compile time （ Static loading ）, There is a separate parsing phase for module dependencies , The output of the module is the interface （ quote ）,import Commands are loaded asynchronously ;
cjs Is runtime load （ Dynamic loading ）, The module outputs a value （ Module object ）, Values are cached ,require Load for synchronization

esm The output is the interface , It is a read-only reference to the value in the module , Therefore, the interfaces obtained when different scripts load modules point to the same instance . Take values according to the output interface , Therefore, the change of the internal value of the module will be read by different scripts

cjs The output is a copy of the value （module.exports object , Cached output value ）, That's why require It's loaded at run time , Because a module object can only be generated when it is running . Once the module file is loaded and executed, a cache value will be output , Subsequent changes within the module will not affect this value （ Different scripts refer to the same value ）, If you want to get the value after the internal change of the module , Then we need to define a special get Function as a accessor to return the value inside the module

CommonJS  A module of , It's a script file .require Command to load the script for the first time , Will execute the entire script , Then generate an object in memory 

{
  id: '...', //  Module name 
  exports: { ... }, //  Each interface of module output 
  loaded: true, //  Whether the implementation is completed 
  ...
}

 When you need to use this module later , It will come to exports The value of the attribute is .
 Even if you execute require command , The module will not be executed again , Instead, it takes a value in the cache （ This is the value copy and cache mentioned above ）.
 in other words ,CommonJS  No matter how many times the module is loaded , Will only run once on the first load , Load later , Return the result of the first run , Unless you manually clear the system cache 

 Reference resources ：https://es6.ruanyifeng.com/#docs/module-loader#CommonJS-%E6%A8%A1%E5%9D%97%E7%9A%84%E5%8A%A0%E8%BD%BD%E5%8E%9F%E7%90%86

Cyclic loading

“ Cyclic loading ” Refer to a Script execution dependency b Script , and b Script execution depends on a Script

//  such as 
// a.js
const a = require("./b.js");
// b.js
const a = require("./a.js");

stay esm modular and cjs Module , The performance of cyclic loading is different ：

cjs Output only the executed part , The part that has not been executed will not output （ At this time, the module script has not been executed , The module output value will also change ）

esm Execute the script first a Reference another module script b when , Will execute the script first b,b And then quote the script a when , The engine will think b From you to a The interface introduced already exists ,b The script will execute normally , At this time, undefined errors may be reported （ This undefined error can be passed var or function To solve ）

https://es6.ruanyifeng.com/#docs/module-loader#%E5%BE%AA%E7%8E%AF%E5%8A%A0%E8%BD%BD

Dynamic injection of module content

esm Inject ： The output interface points to the same instance in different scripts

// module.js
//  Output an object reference , This reference is read-only , But the internal value can be modified 
export default {
    
  //  The properties inside the object can be modified 
  aInterface: {
    }
}

// inject.js
import m from "./module.js";
m.aInterface = {
    
  msg: "new things"
}

cjs Inject ： Use it once used require() Then output a module object cache , The characteristics of using this cache value between different scripts later

// module.js
//  By  require  Then an object will be generated , All scripts use this object 
module.exports = {
    
  aInterface: {
    }
}

// inject.js
//  Once being  require  An object that will be cached will be generated after executing the module script 
const m = require("./module.js");
m.aInterface = {
    
  msg: "new things"
}

Reference resources

https://es6.ruanyifeng.com/#docs/module
https://es6.ruanyifeng.com/#docs/module-loader
https://zhuanlan.zhihu.com/p/337796076