The introduction

In our usual front-end development, we use the import XXX from XXX for module import. These days THE author in the study of Koa development, which involves a lot of Node.js operations. In node.js development, module import is done by cosnt XXX = require(XXX). So when the background is working together, I often get them mixed up. May be too dish 😢, so I spent half a day to learn to understand the difference between them.

Import belongs to the ES6 specification

import

Import is loaded at compile time, that is, before the code is executed. For example, if the path after import is incorrectly written, it is thrown before the code is run, so it must be placed at the top of the module when writing the code (import is statically executed).

Import Indicates the import mode

  import foo from './output'
  import {b as B} from './output'
  import * as OBj from './output'
  import {a} from './output'
  import {b as BB} from './output'
  import c, {d} from './output'
Copy the code

The above import methods are explained at 👇 below

Exoprt and export default

As opposed to import, there should be exports, exoprt and export default. Export is an export, and export dafault is the default export. A module can have multiple exports, but only one export default, and export default can coexist with multiple exports Default is the default export, which is an object wrapped with {} in the form of key-value pairs. Let’s take a look at the following export example:

Export:

//ouput.js
  const info = 'hhhh';
  export { info };
Copy the code

Import:

  //input.js
   import { info } from './output.js'// Import {info} and export {info} are identical
   console.log(info);//'hhhh'
Copy the code

Note that export {info} imports the same info as import {info} imports. Let’s look at the example of export default:

Export:

//output.js
    const info = 'hhhh';
    export default { info };
Copy the code

Import:

  //input.js
   import info from './output.js'// Export default{info} is not the same info.
   console.log(info);//'hhhh'
Copy the code

We are importing only a reference to info. We can also use:

  //input.js
   import otherName from './output.js'
   console.log(otherName);//'hhhh'
Copy the code

The same effect can be achieved. In this case, import imports the object under Export Default, which can be called by any name, because there will only be one Export Default.

Exoprt and export default are used together

In fact,export and Export fault can be used together, as shown in the following example:

Export:

//output.js
  const a = 'info1';
  const b = 'info2';
  const c = 'info3';
  const d = 'info4';
  function printC() {
    console.log('printC executes,c is${c}`);
  }
  export { a };
  export { b };
  export default { b , d , printC };
Copy the code

Import:

//input.js
  import obj, {a,b } from './output'
  console.log(a); //info1
  console.log(b); //info2
  console.log(obj); //{ b: 'info1', d: 'info4', printC: [Function: printC] }
Copy the code

As to rename

Again, the above example:

Export:

//output.js
  const a = 'info1';
  const b = 'info2';
  const c = 'info3';
  const d = 'info4';
  function printC() {
    console.log('printC executes,c is${c}`);
  }
  export { a };
  export { b };
  export default { b , d , printC };
Copy the code

Import:

//input.js
  import {a as A} from './output' // √ Support,A is to be used in input.js
  import {* as A} from './output'// x is not supported
  import * as obj from './output' // √ Export all export and export default attributes in the module
  console.log(A); //info1
  console.log(obj); //{ a: 'info1',b: 'info2',default: { b: 'info2', d: 'info4', printC: [Function: printC] } }
Copy the code

Import {a as a} from ‘./output’ means to export ‘a’ as alias ‘a’. In the imported module, you can operate with ‘a’. Import * as obj from ‘./output’ is returned by combining all export and export default exports in input.js into one object. Let’s console the other properties of obj in the above example:

//input.js
  import * as obj from './output' // √ Export all export and export default attributes in the module
  console.log(obj);// { a: 'info1',b: 'info2',default: { b: 'info2', d: 'info4', printC: [Function: printC] } }
  console.log(obj.a)// info1
  console.log(obj.b)// info2
  obj.default.printC() // printC is executed. The value of c is info3
Copy the code

Why can I print obJ. A and obJ. B here? Import * as obj from ‘./output’ import * as obj from ‘./output’ is all export and export default in input.js The exported content is returned as a combined object. So let’s look at require.

Require belongs to the CommonJS specification

require

Require is called at runtime and therefore executed dynamically, so require can theoretically be used anywhere in the code. So the performance is a little bit worse than that of import. Require importing modules is not that complicated, and the import is the same as the export. Where, export can be used as:

exports.xxx = xxx;
module.exports = xxx;
Copy the code

Const XXX = require(‘ XXX ‘) Let’s look at an example (module.exports):

Export:

  //output.js
  const Name1 = 'hhh1';
  const Name2 = 'hhh2';
  module.exports = { 
    Name1, 
    Name2,
    foo1: function () {
        console.log("This is function foo1!");
    },
    foo2:function (){
        console.log("This is foo2!"); }};Copy the code

Import:

// input.js
  const test = require('./output.js');
  console.log(test.Name1); // hhh1
  console.log(test.Name2); // hhh2
  test.foo1();// This is the foo1 function!
  test.foo2();// This is foo2!
Copy the code

Exports. XXX = XXX

Export:

  //output.js
  const Name1 = 'hhh1';
  const Name2 = 'hhh2';
  exports.foo1 = function(){
      console.log("This is function foo1!");
  }
  exports.foo2 = function(){
      console.log("This is function foo1!");
  }
  exports.Name1 = Name1;
  exports.Name2 = Name2;
Copy the code

Import:

// input.js
  const test = require('./output.js');
  console.log(test.Name1); // hhh1
  console.log(test.Name2); // hhh2
  test.foo1();// This is the foo1 function!
  test.foo2();// This is foo2!
Copy the code

Exports. XXX = XXX and module.exports = XXX; The exports. XXX property is disabled when used together. Let’s look at an example:

Export:

  //output.js
  const firstName = 'Michael';
  const lastName = 'Jackson';
  const year = 1958;
  module.exports = { 
    firstName, 
    lastName, 
    year 
  };
  exports.name = 'hhhh';
Copy the code

Import:

// input.js
  const test = require('./output.js');
  console.log(test.firstName);//Michael
  console.log(test.lastName);//Jackson
  console.log(test.year);/ / 1958
  console.log(test.name);//undefined
Copy the code

In the console above, the exports.name = ‘HHHH’ attribute is overridden by module.exports and is invalid.

conclusion

  1. The require of exports, the module exports to CommonJS standard, the import, export, export default belongs to ES6 specification
  2. Require supports dynamic import, dynamic path matching,import does not support either
  3. Require is called at run time and import is called at compile time
  4. Require is an assignment process and import is a deconstruction process
  5. For different use modes of export and export default,import shall be referenced in different ways. The main difference lies in whether {} exists,export is exported, and import needs {}. Import and export correspond one by one,export Import {}
  6. Exports is a short form of module. Exports. You cannot assign a value to exports directly
  7. Exports is invalidated when assigned directly to module.exports.