commonjs导入导出与ES6 Modules导入导出简单介绍及使用

介绍

1. module.exports 与 exports 是 commonjs 规范中的模块暴露方法；
2. require 是 commonjs 规范中模块引入的方法；
3. export default 与 export 是 ES6 Module 规范的模块暴露方法；
4. import xxx from ‘./xxx’ 是 ES6 Module 规范的模块引入方法

使用

1. commonjs 规范：module.exports
   （1）导出（src/index.js）

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

   （2）引用（src/test.js）

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

2. commonjs 规范：exports
   （1）导出（src/index.js）

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

   （2）引用（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 规范：export default
   （1）导出（src/index.js）

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

   （2）引用（src/test.js）

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

4. ES6 Module 规范：export
   （1）导出（src/index.js）

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

   （2）引用（src/test.js）

   import {
          obj } from './index.js'
   import test from './index.js'
   console.log(obj) // { name: 'zs' }
   console.log(test) // 提示你没有使用 export default；
   

   （3）导出（src/index-2.js）

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

   （4）引用（src/test-2.js）

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

注意事项

commonjs 规范

1. 同时使用 module.exports 暴露与 exports 暴露；最终读取到的结果是 module.exports 暴露的数据；与暴露的顺序无关；

   // 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. 由上得出结论：modules.exports 与 exports 不能同时使用

ES Module 规范

1. 如果使用 export 暴露引用为 import test from ‘./test.js’；则找不到模块，需 export default；

   错误信息："export 'default' (imported as 'test') was not found in './test.js'
   

2. 如果使用 export default 暴露引用为 import { obj } from ‘./test.js’；则找不到模块，需 export；

   错误信息："export 'age' was not found in './test.js'
   

3. export default 和 export 可以同时使用；以下为试验代码；
   （1）导出（src/index-2.js）

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

   （2）引用（src/test-2.js）

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