Brief introduction and use of commonjs import and export and ES6 modules import and export

Introduce

1. module.exports And exports yes commonjs standard Module exposure method in ;
2. require yes commonjs standard The method introduced in the module ;
3. export default And export yes ES6 Module standard Module exposure method of ;
4. import xxx from ‘./xxx’ yes ES6 Module standard Module introduction method

Use

1. commonjs standard ：module.exports
   （1） export （src/index.js）

   const obj = {
         
   	name: 'zs'
   };
   module.exports = obj
   

   （2） quote （src/test.js）

   const obj = require('./index.js');
   console.log(obj) // { name: 'zs' }
   

2. commonjs standard ：exports
   （1） export （src/index.js）

   exports.obj = {
         
   	name: 'zs'
   };
   

   （2） quote （src/test.js）

   const {
          obj } = require('./index.js');
   const test = require('./index.js');
   console.log(obj) // { name: 'zs' };
   console.log(test) // { obj: { name: 'zs' } }
   

3. ES6 Module standard ：export default
   （1） export （src/index.js）

   const obj = {
         
   	name: 'zs'
   };
   export default obj
   

   （2） quote （src/test.js）

   import test from './index.js'
   console.log(test) // { name: 'zs' }
   

4. ES6 Module standard ：export
   （1） export （src/index.js）

   export const obj = {
         
   	name: 'zs'
   };
   
   

   （2） quote （src/test.js）

   import {
          obj } from './index.js'
   import test from './index.js'
   console.log(obj) // { name: 'zs' }
   console.log(test) //  Prompt that you did not use  export default;
   

   （3） export （src/index-2.js）

   export const obj = {
         
   	name: 'zs'
   };
   export default {
         
   	age: 18
   }
   

   （4） quote （src/test-2.js）

   import test, {
          obj } from './index-2.js'
   console.log(test, obj) // {age: 18} {name: 'zs'}
   

matters needing attention

commonjs standard

1. Use at the same time module.exports Exposure and exports expose ; The final read result is module.exports Exposed data ; It has nothing to do with the order of exposure ;

   // src/test.js
   exports.arr = ['1']
   module.exports = {
         
     age: 18
   }
   exports.obj = {
         
     name: 'zs'
   }
   

   // src/index.js
   const test = require('./test.js')
   console.log(test) // { age: 18 }
   

2. Draw a conclusion from the above ：modules.exports And exports Can't be used at the same time

ES Module standard

1. If you use export Exposed references are import test from ‘./test.js’; Module cannot be found , Need to be export default;

    error message ："export 'default' (imported as 'test') was not found in './test.js'
   

2. If you use export default Exposed references are import { obj } from ‘./test.js’; Module cannot be found , Need to be export;

    error message ："export 'age' was not found in './test.js'
   

3. export default and export Can be used at the same time ; The following is the test code ;
   （1） export （src/index-2.js）

   export const obj = {
         
   	name: 'zs'
   };
   export default {
         
   	age: 18
   }
   

   （2） quote （src/test-2.js）

   import test, {
          obj } from './index-2.js'
   console.log(test, obj) // {age: 18} {name: 'zs'}