Modular evolution, basic knowledge of ESM, and node JS, CMS relationship

Modular evolution

CommonJS specification

A file is a module
Each module has a separate scope
Through module Exports export members
Load the module through the require function
Synchronous mode loading module

Because the synchronous mode loading module is not applicable to the browser, it appears
Amd (Asynchronous Module Definition specification) and require JS, which implements the AMD specification and is defined with define. However, it is relatively complex to use, and the module JS file is requested frequently

EsModule

characteristic
1. By adding the attribute of type = module to the script, the JS code can be executed according to the standard of ES Module

 <script type="module">
    console.log('this is es module')
  </script>

2. ESM automatically adopts strict mode and ignores' use strict '

  <script type="module">
    console.log(this)  // Will print undefined
  </script>

3. Each ES Module runs in a separate private scope

<script type="module">
    var foo = 100
    console.log(foo)
  </script>
  <script type="module">
    console.log(foo) // undefined
  </script>

4. ESM requests external JS modules through CORS
5. The script tag of ESM will delay the execution of the script

export

What is exported is only a reference. What is exported is the address where the value is stored

export {name,age}

Import

from in import cannot be omitted js file name, you need to fill in the full file path name. You can also use the full URL to load the file
Import cannot be placed in a nested syntax like if, but needs to be placed at the top level of the file. If dynamic loading is required, use the import() function to return a promise.

import('./module.js').then(function(module){
    console.log(module) // The returned object is in the module
})

If there are many exported contents, there are multiple objects and a default. When importing, other objects can be imported normally. If you want to import import members, you need to rename them

export {a,b}
export default "c";

//---------------------
import {a,b default as c} from "module.js"
//Or as follows, tile can be named at will
import title,{a,b} from "module.js"

Export import members

Some common modules often appear in the project, such as component,business,page and other similar public areas,
It will be troublesome to import one by one when using. You can create a new index JS file, unified export

import {comA}  from "./comA.js
import {comB}  from "./comB.js"

export {comA,comB}

ESM compatibility issues

Because some browsers on the market are incompatible with ESM, there is a browser environment polyfill in addition to webpack packaging, compilation and conversion to ES5. Directly introduce the two cdn links of unpkg website. IE does not support promise. It also needs to introduce polyfill of promise

  <script nomodule src="https://unpkg.com/promise-polyfill@8.1.3/dist/polyfill.min.js"></script> 
  <script nomodule src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/babel-browser-build.js"></script>
  <script nomodule src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/browser-es-module-loader.js"></script>

If the module attribute is added to the script tag, it will only run in browsers that are not compatible with the ESM specification

 <script type="module">

Es Module and node JS interaction

Node. After JS 8.5, we began to use ESM on an experimental basis.
Conclusion:

CommonJS module can be imported into ES Module
The CommonJS module always exports only one default member
CMS members cannot be directly extracted from ESM. Note that import is not a deconstruction of export objects
ES Module cannot be loaded through require in CommonJS module

ESM in Node. Differences between JS and CMS modules

There are no global members of those modules in CommonJS (require, module, exports, _filename, _dirname) in ESM
Require, module and exports can be replaced by import and export

__ filename and__ dirname can be obtained in ESM through the meta attribute of the import object

// Convert to a path through the fileURLToPath method of the url module
import { fileURLToPath } from 'url'
import { dirname } from 'path'
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
console.log(__filename)
console.log(__dirname)

matters needing attention
If you need to continue using CommonJS with type=module,
The file extension needs to be modified to cjs

Added by fredanthony on Sat, 29 Jan 2022 20:00:50 +0200

Programming VIP