Module is standard in ES6. Import is used to import modules and export is used to export interfaces. However, in node, each file is a module. Exports interface using module.exports. Both import and require are used by modularity

import

Static import statements are used to import bindings exported by another module. Imported modules run in strict mode regardless of whether strict mode is declared. In browsers, import statements can only be used in tags of scripts that declare type=”module” and are the best choice for initializing loading dependencies. Dynamic import() is like a function in that it does not need to rely on the script tag of type=”module”. Dynamic import() is useful when modules need to be loaded under certain conditions or on demand. When creating a JavaScript module, the export statement is used to export functions, objects, or raw values from the module so that other programs can use them through the import statement. The exported modules are in strict mode, and the export statement cannot be used in embedded scripts

Basic use:

Static import:

// The import module's default export interface
import defaultExport from "module-name";

// Import the whole module and name it
import * as name from "module-name";

// Import a single interface
import { export } from "module-name";

// Import a single interface and name it
import { export as alias } from "module-name";

// Import two interfaces
import { export1 , export2 } from "module-name";

// Import multiple interfaces and name them
import { export1 , export2 as alias2 , [...] } from "module-name";

// The import module's default export interface and several other interfaces
import defaultExport, { export[, [...]]}from "module-name";

// Import the default export interface of the module and the whole module as a whole and named
import defaultExport, * as name from "module-name";

// Import the global code that runs the module without importing any interface in the module
import "module-name";
Copy the code

Export export statement

// Export a single interface
export letName1 name2,... , nameN;export letName1 =... , name2 =... ,... , nameN;export function FunctionName(){... }export class ClassName {... }// Export the interface list
export { name1, name2, …, nameN };

// Rename the export interface
export { variable1 as name1, variable2 asName2,... , nameN };// Default export interface
export default expression;
export default function (...) {... }export default function name1(...) {... }export { name1 as default,... };// Module redirection
export * from... ;export { name1, name2, …, nameN } from... ;export { import1 as name1, import2 asName2,... , nameN }from... ;export { default } from... ;Copy the code

Dynamic import:

// Import the module dynamically as if calling a function, which returns a promise (this is a phase 3 proposal)
var promise = import("module-name");

// Support await keyword
var module = await import('module-name');
Copy the code

require

Requirejs is a JavaScript module loader that is ideal for use in browsers, but can also be used in other scripting environments, such as Rhino and Node. Module. Exports () : module. Exports () : module. Exports () : module. And assign the result of require to some variable

Basic use:

Require import: a.js

// Import the b.js (.js can be omitted) module and assign it to variable d
var d = require('b');
console.log(d.a());  / / 1
console.log(d.b());  / / 2
console.log(d.c);  / / 3
Copy the code

Module. Exports: b.js

module.exports = {
  fn1: function(){
       var a = 1;
       return a;
     },
  fn2: function() {
       var b = 2;
       return b;
     }, 
  c: 3
}
Copy the code

Difference between import and require

Follow the specification:

Import is an ES6 syntax standard, compatible browsers need to convert the ES5 syntax require using the CommonJS/AMD specification

Call time:

Import is called at compile time, it has to be at the beginning of the code and require is called at run time and can be used anywhere in the code

Implementation process:

Module. Exports (e.g., objects, functions, strings, arrays, etc.). Exports (e.g., objects, functions, strings, arrays). Finally, assign the result of require to a variable