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文件導出的整體對象