js es6 export、import、export default、require、define

ES6 前， 实现模块化使用的是 RequireJS 或者 seaJS（分别是基于 AMD 规范的模块化库， 和基于 CMD 规范的模块化库）
ES6 引入了模块化：导出（export） @与导入（import）两个模块

export

模块是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过 export 输出
在模块顶层，不在代码块中

//out.js
//逐个导出
export var name ='ha';
export var age=2;
//输出函数和类
export function func1(x,y){
	return x+y;
}
export function func2(x){
	return x;
}
//集体导出，导出时可用as重命名
var name='ha';
var age=2;
function func1(x,y){
	return x+y;
}
function func2(x){
	return x;
}
export {name,age,func1, func2 as f2};

import

在模块顶层，不在代码块中
export定义模块的对外接口后，使用该模块时，通过import来加载

//{}中的变量名同模块out.js对外接口的名称一样
//可通过as给导入的变量一个新名字，如age as a
//逐个加载
import {name,age as a,func1,f2} from './out';// .js可省略，import会首先执行，且在编译阶段执行，由于import静态执行，不能使用表达式和变量

//* 整体加载
//此时out.js中所有的变量和方法及类都加载到out类上，使用时：之前为name，此时out.name，且不能改变该out类（如：out.name="lu";）
import * from './out';

import()

import命令只能在模块顶层，不能在代码块中，否则会语法错误。没办法进行运行时加载，所以有了import()函数，进行动态加载
import接收的参数，import都可以接收

export default

import时，需知道加载的变量名或函数名，否则无法加载，export default可为用户指定
export default用于指定模块的默认输出，一个模块只能有一个默认输出
export default导出一个叫default的变量或方法，允许你导入该文件时为改变量取任意名字

//out.js
export default function(x){
	return x;
}
//main.js
//此时import不使用{}
import func from'./out';
console.log(func(x));

js文件形式

//导出
//导入
//代码

import和require区别

为了 JS 模块化编程使用.
es6前：模块规范有CommonJS和AMD，都是通过require()来进行加载模块【运行时加载】
es6：模块规范通过import【编译时加载】和import()【运行时加载】
require 是运行时调用，所以 require 理论上可以运用在代码的任何地方
import 是编译时调用，所以必须放在文件开头

//CommonJS是同步加载，只能用在服务器端，等待时间为硬盘读取时间
//CommonJS中暴露模块使用module.exports和exports【定义模块】
//CommonJS中，有全局方法require()，加载模块，有模块math.js
var math=require("math");
console.log(math.add(2,3));


//对于浏览器端，等待时间取决于网速，如果还使用同步加载，可能会很长时间，所以需要异步加载
//AMD：Asynchronous Module Definition 异步模块定义 异步方式加载模块，可用于浏览器端

//使用define()函数来定义模块
//name：定义的模块名，可省略
//dependencies：定义的该模块所依赖的模块，数组格式，使用相对路径，可省略
//callback：回调函数，返回一个函数
define(name,[dependencies],callback);
//一个不依赖其他模块的模块定义
define(function(){ var add=function(x,y){return x+y;} return {add:add};});
//依赖其他模块的模块定义
define(['math'],function(math){var add_=functiona(x,y){return math.add(x,y);}return{add_:add};});

//使用require()加载模块
//require([module],callback);
//callback：与define项目无return
require(['math'],function(math){console.log(math.add(2,3);});

参考

https://www.cnblogs.com/kreo/p/11069640.html
https://www.cnblogs.com/fanyanzhao/p/10298543.html
https://www.cnblogs.com/hwldyz/p/9145959.html
https://www.cnblogs.com/libin-1/p/7127481.html