ES 6のモジュール化管理


ES 6の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/xxx 1'(export default導出方式の参照方式)