ES6的模块化管理

ES6的export

export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口

1.1 export

// export/index.js
const a = "123";
const fn = () => window.location.href;

export { fn };

// show/index.js
const ex = require("./export/index");
import x from "./export/index";
import { fn } from "./export/index";
console.log(ex, "export1"); // {fn: ƒ, __esModule: true} "export1"
console.log(x, "export-x"); // undefined "export-x"
console.log(fn, "export-fn"); // function() { return window.location.href; } "export-x"

1.2 export default

// export/index1.js
const a = "123";
const fn = () => window.location.href;
export default fn;


// show/index1.js
const ex1 = require("./export/index1");
import x from "./export/index1";

console.log(ex1, "export1"); 
// {default: ƒ, __esModule: true} "export1"
console.log(x, "export2"); 
// ƒ fn() {return window.location.href;} "export2"

export 可以导出的是一个对象中包含的多个 属性，方法。
export default 只能导出 一个 可以不具名的 对象。

import {fn} from ‘./xxx/xxx’ ( export 导出方式的 引用方式 )
import fn from ‘./xxx/xxx1’ ( export default 导出方式的 引用方式 )