阮一峰 ECMAScript 6
module.exports 和 exports是属于CommonJS模块规范，对应---> require属于CommonJS模块规范
export 和 export default是属于ES6语法，对应---> import属于ES6语法
module.exports和exports
导出：module.exports 或 exports
导入：require
通常exports方式使用方法是：
exports.[function name] = [function name]
moudle.exports方式使用方法是：
moudle.exports= [function name]
**exports **返回的是模块函数
**module.exports **返回的是模块对象本身，返回的是一个类
CommonJS 模块就是对象，输入时必须查找对象属性。
let { stat, exists, readfile } = require('fs');
// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;
module.exports 可以返回全局共享的变量或者方法。
//导出app.js
var app = {
name: 'app',
version: '1.0.0',
sayName: function(name){
console.log(this.name);
}
}
module.exports = app;
//引用
var app = require('app.js对应的路径');
app.sayName('hello');//hello
export和export default
导出：export 或 export default
导入：import
export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量
1.export与export default均可用于导出常量、函数、文件、模块等
2.在一个文件或模块中，export、import可以有多个，export default仅有一个
- 通过export方式导出，在导入时要加{ }，export default则不需要
- export能直接导出变量表达式，export default不行。
导出变量
// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};
导出函数方法
// 报错
function f() {}
export f;
// 正确
export function f() {};
// 正确
function f() {}
export {f};
import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。
如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名
import { firstName, lastName, year } from './profile.js';
import { lastName as surname } from './profile.js';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
例纸
export const a = '100';
export const h1= function(){
console.log('hello shadow');
}
function h2(){
console.log('hello h2');
}
export { h2};
//export default导出
const m = 200;
export default m;
//引用
import { h1, h2,a} from '.js路径地址'; //导出了 export 方法
import m from './testEs6Export'; //导出了 export default
h1(） //hello shadow
h2() //hello h2
console.log(a) //100
consolo.log(m) //200
export default和require混合使用
1.import 这种加载称为“编译时加载”或者静态加载
2.require 这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，或者动态加载
所以不能按需加载对应的js使用import，必须提前引入，如果在判断条件中使用import，就会报出如下问题：
'import' and 'export' may only appear at the top level (372:2)
但是import和exports不能同时使用，混用import和module.exports会报出如下问题：
Uncaught TypeError: Cannot assign to read only property 'exports' of object
需要用import又需要用require，就需要 require(xx.js).default
//导出会员升级插件
import smtmallcomponents from "./smtmallcomponents.umd.js"
console.log("smtmallComponents",smtmallcomponents)
var routes = {
path: '/vipUpdate',
name: "VipUpdate",
meta: { title: '会员升级' },
component: smtmallcomponents[0]
}
export default{routes}
//按需引入
if(window.location.host.indexOf("小星星") >= 0){
let smtmallcomponentRoutes = require( '../../static/js/xqyg/index')
targetRouter.push(smtmallcomponentRoutes.default.routes);
}
