ES6与CommonJs之间的相互导入导出

情景一：使用es6导出，使用es6导入

入口文件

index.js

import *as A from './a.js';
console.log(A);

导出文件

a.js

export var a = 1;
export var b = 2;
export default {
    name:'张三',
    age:21,
}

我们执行npx webpack，在main.js中执行编译后的代码，控制台输出下面的内容

Object [Module] { a: [Getter], b: [Getter], default: [Getter] }

情景一结论：当我们使用es6的*导入 以ES6方式导出的文件时，导入的是一个整体对象，可以看到导入的整体对象是一个object

情景二：使用es6导出，使用CommonJs导入

入口文件

index.js

var A = require ("./a");
console.log(A);

导出文件

a.js

export var a = 1;
export var b = 2;
export default {
    name:'张三',
    age:21,
}

我们执行npx webpack，在main.js中执行编译后的代码，控制台输出下面的内容

Object [Module] { a: [Getter], b: [Getter], default: [Getter] }

情景二结论：当我们使用CommonJs导入 `以ES6方式导出的文件`时，导入的仍是一个整体对象，可以看到导入的整体对象是一个object 同情景一

结论：因此，我们需要特别注意，当我们用require的方式导入 `以ES6方式导出的文件`时，我们得到的是一个整体对象`Object [Module] { }`

情景三：使用CommonJs导出，使用es6导入

入口文件

index.js

var A = require ("./a");
console.log(A);

导出文件

a.js

module.exports = {
    name:'张三',
    age:21,
}

我们执行npx webpack，在main.js中执行编译后的代码，控制台输出下面的内容`
{ name: '张三', age: 21 }

将入口文件中导入方式改为es6 module
index.js

import A from './a.js';
// var A = require ("./a");
console.log(A);

控制台输出一样的内容

{ name: '张三', age: 21 }

结论：可以知道 引入一个 以CommonJS方式导出的内容，导入的对象就是这个CommonJS文件导出的整体对象