大型项目需要模块机制

模块方案分三种

1. CommonJS(用于服务器)
2. AMD(用于浏览器)
3. ES6 Module(最新，可以替代上面两者)

CommonJS

CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)

ES Module

特点

1. 静态化，不像require运行时导入
2. export语句输出的接口，与其对应的值是动态绑定关系
3. 按需加载，import { stat, exists, readFile } from 'fs';当然，这也导致了没法引用 ES6 模块本身???
4. 重复引用只会执行一次
5. 不循序运行时修改import模块的值

基本用法

俩命令export和import

export

• export
  • 取值需要 {}
  • 支持as重命名
• export default
  • export default 实质是export const default 只不过default是一个特殊变量，取值不可以使用 {} // 一种情况除外

function add(x, y) {
  return x * y;
}
export { add as default };
...
import  { default as add }  from "./add";

• import 单

page1.js

// 用法1
export const year = 2019;
import { year } from './page1.js';
import * as time from './page1.js';  // 使用需要time.year

// 用法2
export default { a:'a' }
import a from './page1.js';

// 用法3
const firstName = 'Michael';
const lastName = 'Jackson';
const year = 1958;

export { firstName, lastName, year };
// 用法4，重命名
function v1() { ... }
export { v1 as streamV1 };

// 用法5
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// 用法6
export default 42;
// 7
export { foo, bar } from 'my_module';
注意：当前模块不能直接使用foo和bar
// 8
export { default } from 'foo';
export { default as es6 } from './someModule';
import { es6 } from ''
// 9
export * from 'circle';
export var e = 2.71828182846;
export default function(x) {
  return Math.exp(x);
}
注意，export *命令会忽略circle模块的default方法

import

page2.js

// 用法1

// 用法2 
import a from './page1.js';


import * as days from './page1.js';

错误用法

错误用法1：直接导出值，而不是导出接口

// 报错
export 1;

// 报错 原因：导出的是值而不是接口
var m = 1;
export m;

// 正确
export var m = 1;

// 报错，原因：导出的是值而不是接口
function f() {}
export f;

// 报错，原因：export default命令其实只是输出一个叫做default的变量，
// 所以它后面不能再跟变量声明语句
export defult const m = 100


import * as circle from './circle';

// 错误用法 原因：不建议
circle.foo = 'hello';
circle.area = function () {};