The heart of the apprentice, there are mistakes welcome to point out ha ~
First, the process of modular development
The following is an article on the development of front-end modularity
Use of modularity in different environments: browser environment: ES Modules Module specification Node environment: CommonJS Modularity specification
ES Modules feature
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<! The -- script tag executes the load script immediately, and the defer property executes the script after the page has been rendered -->
<! -- Set type = module to the script tag to tell the code in the current script tag to execute according to the ESM specification -->
<! -- <script type="module"></script> -->
<! -- Basic features of ESM -->
<! -- 1. Automatically adopt strict mode -->
<script type="module">
console.log(this) // undefined
</script>
<! -- 2. Each ESM module is a separate private scope -->
<script type="module">
var a = 111
console.log(a)
</script>
<script type="module">
console.log(a) // ref Error
</script>
<! -- 3. The ESM's script tag will defer execution of the script, as as the default attribute defer -->
<! -- 4. ESM requests external JS modules through CORS cross-domain request -->
<! The server must support CORS if you want to request an external address -->
<script type="module" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<! The server supports CORS -->
<script type="module" src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
</body>
</html>
Copy the codeconclusion
- Strict mode is automatically adopted
- Each ESM module is a separate private scope
- The ESM’s script tag will defer the script execution, as it defaults to defer
- ESM requests external JS modules through the cross-domain request method of CORS
Import and export of ES Modules
1. Export import {}
The {} following export import is not a literal object but a fixed syntax that has nothing to do with ES6’s object shorthand and deconstruction.
Not short 
2. Differences between export {} and export default
- By export {m1, m2,m3…. } can export multiple members for us
- Export Default can only export one default member for us. A module is allowed to export only one default member
- Export {} and export default can be used together
3. Export is a stack memory variable (raw data type stores the value, object data type stores the heap memory reference address)
First we export the variables name, feature in module.js, and print them in index.js. (feature hair = black) (feature hair = black) (index = black) (feature hair = black) (index = black) (index = black) (feature hair = black) (index = black) The values in the index module have changed. If it is a copy of the value, nothing should happen at this point.
4. Import is a read-only member and cannot change its value
5. Import Import path related
(1) Must keep up with the complete import file path, can not omit the file type.
The CommonJS require() module can omit file extensions
(2). Import can also import third-party modules by adding the full path, for examplehttps://localhost:3000/.
(3) Import Modules provided by CommonJS cannot be imported in the browser environment
6. If you do not need to import a member and only want to execute the imported module, you can omit {}. For example, you can write: import ‘./module.js’.
7. Import * as alias from ‘./module.js’ to export all members under module
8. How to load modules dynamically by calling the global import(file path), which returns a promise object. The exported value is retrieved through the THEN method.
At this point, the page will report an error, see the following code how to dynamically export members
const age = 19
if (age > 18) {
// If age 18 we need to import all the members in modules.js
import('./modules.js').then(res= > {
console.log(res, 'Dynamic Import member')})}else {
// From here we can import another module
// import ('./modulesB.js')
}
Copy the code
9. There are two ways to import the default member and named member
import {name, age, default as hhh) from './module.js'
import hhh, {name,age} from './modules.js'
Copy the code10. Import and export can be used together.
export {name, age} from './modules.js' 。
Copy the code4. ES Modules browser compatibility problems
If Internet Explorer still does not support this syntax, you can use browser-es-moyule-loader Pollyfill to make Internet Explorer support the ES Module syntax
Support for ESModules in the Node environment
Node.js currently supports ES Modules as an experimental feature since version 8.5
1. Change the file name extension to.mjs. When you run the node command, specify the command line parameters as shown in Figure 2-16
2. Specify type = module in the package.json file
ES Modules interact with CommonJS in the Node environment
- ES Modueles can import members exported by the CommonJS module
- Export members defined by ES Modules cannot be imported into CommonJS
There is a problem with syntax error exceptions
- CommonJS always exports only one default member, the exports object. Multiple members add keys and values to this object
/ / the first
module.exports = exported members// The second expors is an alias of module.exports
// Exports must be added to this method by adding a key value to the exported object
exports.key1 = value1
exports.key2 = value2
Copy the codeES Modules are different from CommonJS in the Node environment
The ESM can also be used in the Node environment with Babel
yarn add @babel/node @babel/core @babel/preset-env -D
Copy the codeConfigure the babelRC file, using which conversion library the code will be converted to. Babel itself is not responsible for any code conversion, it only provides a platform, the actual code conversion is @babel/preset-env, preset-env is a collection of conversion libraries containing ES6+ feature syntax, ESModules conversions, and so on.
