导出与导入(require，import，module.exports，exports，export，export default)

一、不同点

1、加载时间不同

require：

  运行时加载

import：

  编译时加载（效率高）

  【先写调用，后写import导入不报错】

  【加载时机的原因，让import会提升到整个文件的头部】

2、导入方法不同

require：

  动态加载，可以写在任何地方

import：

  静态导入，只能写在代码的最外层，不可以写在函数体中，否则报错

3、导入模式不同

require导入的变量

  在源文件中更改后，拿到的还是初始化的值

   ——(对基本数据类型的复制，对引用类型数据的浅拷贝）

import导入的变量

   在源文件中更改后，拿到的的值也会改变（对值的引用，也就是只引用定义）

4、使用注意事项

node中

  常使用require/exports./module.exports来导出

  如使用import/export/export default导出需要给package.json中添加type:module字段

script中

  如引入脚本，无需配置type

  如引入模块，模块若由export default或export导出，要在script标签配置type="module"

三、import

a：export逐个导出

// ei-export.js
// export对于需要暴露的数据放到一个对象中进行对外导出
const add=(x,y)=>x+y
const username="昔冰"
export {
   add,username}


// 或挨个对外导出
export const add = (x, y) => x + y;
export const username = "昔冰_G";

import {
    username } from "./ei-export.js";// 一定要指明文件后缀，否则报错internalBinding('errors').triggerUncaughtException(
console.log(username);// 昔冰

b：export.default默认导出

// ei-export.js
// export存在默认导出
export const add = (x, y) => x + y;
export const username = "昔冰_G";
const userInfo = {
   
  name: "xibing",
  age: 18,
};
export default {
    // 一个文件中只能有一个默认导出
  userInfo,
};

// 指定了则按export对应的来
import {
    add, username } from "./ei-export.js"; 
console.log(add(3, 5), username); // 8 昔冰_G

// 如果不指定导入对象则以【默认】导出对象export.default对应的为准
import a from "./ei-export.js";
console.log(a);
// { userInfo: { name: 'xibing', age: 18 } }

c：import * as

// ei-export.js
export const add = (x, y) => x + y;
export const username = "昔冰_G";
const userInfo = {
   
  name: "xibing",
  age: 18,
};

// export默认导出
export default {
   
  userInfo,
};

import * as myModule from "./ei-export.js";
console.log(myModule); 
// add [Function: add]
// username "昔冰_G"
// default {userInfo:{name:"xibing",age:18}}

转自：https://blog.csdn.net/qq_38800316/article/details/127496678