在之前的javascript中是沒有模塊化概念的洪囤。如果要進(jìn)行模塊化操作，需要引入第三方的類庫万皿。隨著技術(shù)的發(fā)展摧找，前后端分離核行，前端的業(yè)務(wù)變的越來越復(fù)雜化。直至ES6帶來了模塊化蹬耘，才讓javascript第一次支持了module芝雪。ES6的模塊化分為導(dǎo)出（export）與導(dǎo)入（import）兩個模塊。
export的用法
在ES6中每一個模塊即是一個文件综苔，在文件中定義的變量惩系，函數(shù)，對象在外部是無法獲取的休里。如果你希望外部可以讀取模塊當(dāng)中的內(nèi)容蛆挫，就必須使用export來對其進(jìn)行暴露（輸出）赃承。先來看個例子妙黍，來對一個變量進(jìn)行模塊化。我們先來創(chuàng)建一個test.js文件瞧剖，來對這一個變量進(jìn)行輸出：
export let myName = "Jon";
然后可以創(chuàng)建一個index.js文件拭嫁，以import的形式將這個變量進(jìn)行引入:
import { myName } from "./test.js";
console.log(myName); //Jon
如果要輸出多個變量可以將這些變量包裝成對象進(jìn)行模塊化輸出：
let myName = "Jon";
let myAge = 18;
let myfn = function(){
return "我是"+myName+"！今年"+myAge+"歲了"
}
export {
myName,
myAge,
myfn
}
/******************************接收的代碼調(diào)整為**********************/
import { myfn, myAge, myName } from "./test.js";
console.log(myfn()); //我是Jon抓于！今年18歲了
console.log(myAge); //18
console.log(myName); //Jon
如果你不想暴露模塊當(dāng)中的變量名字做粤，可以通過as來進(jìn)行操作:
let myName = "Jon";
let myAge = 18;
let myfn = function(){
return "我是"+myName+"！今年"+myAge+"歲了"
}
export {
myName as name,
myAge as age,
myfn as fn
}
/******************************接收的代碼調(diào)整為**********************/
import {fn,age,name} from "./test.js";
console.log(fn()); //我是Jon捉撮！今年19歲了
console.log(age); //19
console.log(name); //Jon
也可以直接導(dǎo)入整個模塊怕品，將上面的接收代碼修改為：
import * as info from "./test.js"; //通過*來批量接收，as 來指定接收的名字
console.log(info.fn()); //我是Jon巾遭！今年18歲了
console.log(info.age); //18
console.log(info.name); //Jon
默認(rèn)導(dǎo)出（default export）
一個模塊只能有一個默認(rèn)導(dǎo)出肉康，對于默認(rèn)導(dǎo)出，導(dǎo)入的名稱可以和導(dǎo)出的名稱不一致灼舍。
/******************************導(dǎo)出**********************/
export default function(){
return "默認(rèn)導(dǎo)出一個方法"
}
/******************************引入**********************/
import myFn from "./test.js"; //注意這里默認(rèn)導(dǎo)出不需要用{}吼和。
console.log(myFn()); //默認(rèn)導(dǎo)出一個方法
可以將所有需要導(dǎo)出的變量放入一個對象中，然后通過default export進(jìn)行導(dǎo)出
/******************************導(dǎo)出**********************/
export default {
myFn(){
return "默認(rèn)導(dǎo)出一個方法"
},
myName: "Jon"
}
/******************************引入**********************/
import myObj from "./test.js";
console.log(myObj.myFn(), myObj.myName); //默認(rèn)導(dǎo)出一個方法 Jon
重命名export和import
如果導(dǎo)入的多個文件中骑素，變量名字相同炫乓，即會產(chǎn)生命名沖突的問題，為了解決該問題献丑，ES6為提供了重命名的方法末捣，當(dāng)你在導(dǎo)入名稱時可以這樣做：
/******************************test1.js**********************/
export let myName = "我來自test1.js";
/******************************test2.js**********************/
export let myName = "我來自test2.js";
/******************************index.js**********************/
import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";
console.log(name1); //我來自test1.js
console.log(name2); //我來自test2.js
轉(zhuǎn)載自：http://www.reibang.com/p/65099c4d597b
二
CommonJS規(guī)范規(guī)定，每個模塊內(nèi)部创橄，module變量代表當(dāng)前模塊箩做。這個變量是一個對象，它的exports屬性（即module.exports）是對外的接口筐摘。加載某個模塊卒茬，其實(shí)是加載該模塊的module.exports屬性船老。
var x = 5;
var addX = function (value) {
return value + x;
};
module.exports.x = x;
module.exports.addX = addX;
上面代碼通過module.exports輸出變量x和函數(shù)addX。
require方法用于加載模塊圃酵。
var example = require('./example.js');
console.log(example.x); // 5
console.log(example.addX(1)); // 6
exports 與 module.exports
為了方便柳畔，Node為每個模塊提供一個exports變量，指向module.exports郭赐。這等同在每個模塊頭部薪韩，有一行這樣的命令
var exports = module.exports;
于是我們可以直接在 exports 對象上添加方法，表示對外輸出的接口捌锭，如同在module.exports上添加一樣俘陷。注意，不能直接將exports變量指向一個值观谦，因?yàn)檫@樣等于切斷了exports與module.exports的聯(lián)系拉盾。
ES6模塊規(guī)范
不同于CommonJS，ES6使用 export 和 import 來導(dǎo)出豁状、導(dǎo)入模塊捉偏。
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
需要特別注意的是，export命令規(guī)定的是對外的接口泻红，必須與模塊內(nèi)部的變量建立一一對應(yīng)關(guān)系夭禽。
// 寫法一
export var m = 1;
// 寫法二
var m = 1;
export {m};
// 寫法三
var n = 1;
export {n as m};
export default 命令
使用export default命令，為模塊指定默認(rèn)輸出谊路。
// export-default.js
export default function () {
console.log('foo');
}
CommonJS規(guī)范讹躯，http://javascript.ruanyifeng.com/nodejs/module.html
ES6 Module 的語法，http://es6.ruanyifeng.com/#docs/module
轉(zhuǎn)載：https://www.cnblogs.com/fayin/p/6831071.html
三
module變量代表當(dāng)前模塊缠劝。這個變量是一個對象潮梯，module對象會創(chuàng)建一個叫exports的屬性，這個屬性的默認(rèn)值是一個空的對象：
module.exports = {};
例子：app.js
module.exports.Name="我是電腦"剩彬；
module.exports.Say=function(){
console.log("我可以干任何事情")锣笨；
}
//上邊這段代碼就相當(dāng)于一個對象
{
"Name":" 我是電腦"雾叭，
"Say" :function(){
console.log("我可以干任何事情")窝剖；
}
}
require方法用于加載模塊棠隐。
var req=require("./app.js");
req.Name //這個值是 "我是電腦"
req.Say() //這個是直接調(diào)用Say方法，打印出來 "我可以干任何事情"
2轻黑、exports 與 module.exports的關(guān)系
Node為每個模塊提供一個exports變量糊肤，指向module.exports∶ケ桑可以通俗的理解為：
var exports = module.exports;
//兩個是相等的關(guān)系馆揉，但又不是絕對相當(dāng)?shù)年P(guān)系
例如：
1.module.exports可以直接導(dǎo)出一個匿名函數(shù)或者一個值
module.exports=function(){
var a="Hello World"
return a;
}
但是exports是不可以的，因?yàn)檫@樣等于切斷了exports與module.exports的聯(lián)系抖拦。
exports=function(){ //這樣寫法是錯誤的
var a="Hello World" //這樣寫法是錯誤的
return a; //這樣寫法是錯誤的
} //這樣寫法是錯誤的
3升酣、export和export default的區(qū)別
export是es6引出的語法舷暮，用于導(dǎo)出模塊中的變量，對象噩茄，函數(shù)下面，類。對應(yīng)的導(dǎo)入關(guān)鍵字是import绩聘。
二者的區(qū)別有以下幾點(diǎn)：
export default在一個模塊中只能有一個沥割，當(dāng)然也可以沒有。export在一個模塊中可以有多個凿菩。
export default的對象机杜、變量、函數(shù)衅谷、類椒拗，可以沒有名字。export的必須有名字会喝。
export default對應(yīng)的import和export有所區(qū)別
1.export寫法
//./aap.js
var name="我是電腦"陡叠；
var say=function(){
console.log("我可以干很多事")；
}
export {name肢执，say}；
//也可以直接一個一個的export但是必須得有名字
export const a=1译红；
export function data(){
return data;
}
//其他頁面引入時必須這樣
import {name预茄，say} from "./app.js"
2.export default
//app.js
//可以沒有函數(shù)名字
export default function(){
return data;
}
//這里export不能這樣導(dǎo)出
export default const a=12；
//應(yīng)該這樣導(dǎo)出
const a=12侦厚；
export default a
//其他頁面引入時必須這樣
import data from "./app.js"
總結(jié)：可以看到用export default耻陕，import語句不需要使用大括號；用export刨沦，對應(yīng)的import語句需要使用大括號诗宣，一個模塊只能有一個默認(rèn)輸出，所以export default只能使用一次想诅。
轉(zhuǎn)載：https://www.cnblogs.com/heyushuo/p/8521818.html
es5
https://www.cnblogs.com/ooooevan/p/5897586.html
https://segmentfault.com/a/1190000019399632?utm_medium=referral&utm_source=tuicool
