JavaScript 模块导入和导出

require 和 exports

require 对应的的导入，有 module.exports 和 exports 两种导出方式；

• module.exports = {} 直接给导出值对象赋值
• exports.a = {} 为导出值对象添加a属性

两者同时存在的情况：

// 两者同时存在的时候 以相当于直接赋值的 module.exports 为准
// test.js
module.exports = { name: 'jack'};
exports.a = { name : 'aaa' };
exports.b = { name : 'bbb' };

// main.js
var c = require('./test.js');
console.log(c);  // { name: 'jack' };

只有 exports的情况

// test2.js 相当于为导出值对象添加了a,b两个属性
exports.a = { name : 'aaa' };
exports.b = { name : 'bbb' };

// 等同于
module.exports = {
  a: { name : 'aaa' },
  b: { name : 'bbb' },
}


// main.js
var c = require('./test2.js');
console.log(c);  // {a : {name: 'aaa'}, b : {name : 'bbb' }}

import 和 export

import 对应的导入，有 export default 和 export 两种导出方式。

在同一个文件中，export default 只能有一个，而export可以有多个。两者可以共存

export default function () {} 相当于是为导出值对象设置'default'属性；

export function a () {} 相当于为导出值对象设置 'a' 属性；

而在import xx from './test.js' 默认引入的xx就是导出值对象的'default'属性，如果导出值对象没有'default'属性，则导入整个导出值对象。

import { a } from './test.js' 按需导入，类似解构赋值，即导入导出值对象的'a'属性。

export default {
  a: 'aaa'
}

export var b = 22;
// export 22; 报错，export 后面只能是声明或语句，因为对应的是exports必须要有属性名


// main.js
// 虽然可以共存，但是引入的时候却要分开引入
import defaultName, { b } from '@/utils/handle-enum';

console.log(defaultName); // {a: 'aaa'}
console.log(b); // 22