JS中 export，export default，import

阮一峰 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仅有一个

3. 通过export方式导出，在导入时要加{ }，export default则不需要
4. 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);
}