摘要：每個模塊內(nèi)部，變量代表當(dāng)前模塊。這個變量是一個對象，它的屬性即是對外的接口。加載某個模塊，其實(shí)是加載該模塊的屬性。為了方便，為每個模塊提供一個變量，指向。這等同在每個模塊頭部，有一行這樣的命令。

我們前端在開發(fā)過程中經(jīng)常會遇到導(dǎo)入導(dǎo)出功能，
在導(dǎo)入時，有時候是require，有時候是import
在導(dǎo)出時，有時候是exports，module.exports，有時候是export，export default
今天我們對這些內(nèi)容進(jìn)行簡單的介紹

import，export，export default屬于ES6規(guī)范

import 是在編譯過程中執(zhí)行
也就是說是在代碼執(zhí)行前執(zhí)行，
比如說，import后面的路徑寫錯了，在運(yùn)行代碼前就會拋錯，
在編寫代碼時，import不是一定要寫在js的最前面
import命令具有提升效果，會提升到整個模塊的頭部，首先執(zhí)行。（是在編譯階段執(zhí)行的）
import是靜態(tài)執(zhí)行的
因?yàn)閕mport是靜態(tài)執(zhí)行的，不能使用表達(dá)式和變量，即在運(yùn)行時才能拿到結(jié)果的語法結(jié)構(gòu)
比如，不能再if和else中使用import
再比如，import后的from的路徑，可以是相對路徑，可以是絕對路徑，但是不能是根據(jù)變量得來的路徑

//import 路徑不可以為變量
var url = "./output"
  import {
    a,
    b
  } from url//這么寫會報(bào)錯
//------------------
//import 的引入與否不能和代碼邏輯向關(guān)聯(lián)
let status= true
if(status){
     import {
    a,
    b
  } from url//這么寫會報(bào)錯
}

import可以使用as進(jìn)行重命名
import 的有很多種導(dǎo)入方式，

  import foo from "./output"
  import {b as B} from "./output"
  import * as OBj from "./output"
  import {a} from "./output"
  import {b as BB} from "./output"
  import c, qoyqs8suu2u from "./output"

導(dǎo)入的方式和導(dǎo)出有些關(guān)聯(lián)，我們在下面說導(dǎo)出的時候，對以上這些導(dǎo)入方式進(jìn)行逐一介紹

將exoprt和export default放在一起，因?yàn)樗鼈冴P(guān)聯(lián)性很大
簡單說：export是導(dǎo)出，export default是默認(rèn)導(dǎo)出
一個模塊可以有多個export，但是只能有一個export default，export default可以和多個export共存
export default 為默認(rèn)導(dǎo)出，導(dǎo)出的是用{}包裹的一個對象，以鍵值對的形式存在
導(dǎo)出的方式不同，導(dǎo)入的方式也就不同，
所以建議同一個項(xiàng)目下使用同一的導(dǎo)入導(dǎo)出方式，方便開發(fā)
export default解構(gòu)以后就是export
通過兩個直觀的demo看下export和export default的區(qū)別
先看一段代碼(export)
output.js

const a = "valueA1"
export {a}

input.js

import {a} from "./output.js"http://此處的import {a}和export {a}，兩個a是一一對應(yīng)關(guān)系
console.log(a)//=>valueA1

留意上面的代碼其中export {a}導(dǎo)出的a，和import {a}導(dǎo)入的a是同一個a
再看一段代碼(export default)

const a = "valueA1"
export default{a}

input.js

import a from "./output.js"http://此處的a和export default{a}，不是一個a，
console.log(a)//=>{ a: "valueA1" }

看下export default的栗子中的input.js，我們稍作改動

import abc from "./output.js"http://此處的a和export default{a}，不是一個a，
console.log(abc)//=>{ a: "valueA1" }

我們做了些改動，但是輸出沒有變化，import導(dǎo)入的是export default下的對象，叫什么名字都可以，因?yàn)橹粫嬖谝粋€export default

exoprt和export default在同一個模塊中同時使用，是支持的，雖然我們一般不會這么做
看一個栗子
output.js

const a = "valueA1"
const b = "valueB1"
const c = "valueC1"
const d = "valueD1"
function foo() {
  console.log(`foo執(zhí)行，c的值是${c}`);
}
export {a}
export 
export default { b,d,foo}

input.js

import obj, {a,b } from "./output"
console.log(a); //=>valueA1
console.log(b); //=>valueB1
console.log(obj); //=>{ b: "valueB1", d: "valueD1", foo: [Function: foo] }

通過 exoprt和export default導(dǎo)出的在import引入時都支持通過as進(jìn)行重命名
看個栗子
還是上面的那個output.js

const a = "valueA1"
const b = "valueB1"
const c = "valueC1"
const d = "valueD1"
function foo() {
  console.log(`foo執(zhí)行，c的值是${c}`);
}
export {a}
export 
export default { b,d,foo}

input.js

import {a as A} from "./output"
import {* as A} from "./output"http://這是不支持的
import * as obj from "./output"
console.log(A); //=>valueA1
console.log(obj); //=>{ a: "valueA1",default: { b: "valueB1", d: "valueD1", foo: [Function: foo] },b: "valueB1" }

as后面的變量是你要在input.js中使用的
重點(diǎn)看這一部分

import {* as A} from "./output"http://這是不支持的
import * as obj from "./output"
console.log(obj); //=>{ a: "valueA1",default: { b: "valueB1", d: "valueD1", foo: [Function: foo] },b: "valueB1" }

代表了所有，包括了export和export default導(dǎo)出的

我們之前說import{}和export{},是一一對應(yīng)關(guān)系，所以在export導(dǎo)出的，在import{}不支持使用*
關(guān)于 import，export，export default先介紹到這里，我們繼續(xù)

這是 AMD規(guī)范

require是運(yùn)行時調(diào)用，所以require理論上可以運(yùn)用在代碼的任何地方

例如，這樣是支持的

let flag = true
if (flag) {
  const a = require("./output.js")
  console.log(a); //支持
}

let flag = true
let url = "./output.js"
if (flag) {
  const a = require(url)
  console.log(a); //支持
}

通過require引入，是一個賦值的過程

根據(jù)AMD規(guī)范
每個文件就是一個模塊，有自己的作用域。在一個文件里面定義的變量、函數(shù)、類，都是私有的，對其他文件不可見。
每個模塊內(nèi)部，module變量代表當(dāng)前模塊。這個變量是一個對象，它的exports屬性（即module.exports）是對外的接口。加載某個模塊，其實(shí)是加載該模塊的module.exports屬性。

為了方便，Node為每個模塊提供一個exports變量，指向module.exports。這等同在每個模塊頭部，有一行這樣的命令。

const exports = module.exports;

所以說
以下兩種寫法等價(jià)

exports.a ="valueA1"
module.exports.a="valueA1"

前面說在每個模塊提供一個exports變量，指向module.exports。
所以不能直接給exports賦值，賦值會覆蓋

const exports = module.exports;

直接給exports賦值會切斷exports和 module.exports的關(guān)聯(lián)關(guān)系
看一個栗子
output.js

const a = "valueA1"
const b = "valueB1"
const c = "valueC1"
module.exports = { c}
exports.b = b//當(dāng)直接給 module.exports時，exports會失效
module.exports.a = a

input.js

  const obj = require("./output.js")
  console.log(obj); //=>{ c: "valueC1", a: "valueA1" }

繼續(xù)看代碼
output.js

//部分省略
exports.b = b//這樣可以生效
module.exports.a = a

input.js

  const obj = require("./output.js")
  console.log(obj); //=>{ b: "valueB1", a: "valueA1" }

再看一段代碼
output.js

//部分省略
module.exports = { c}
module.exports.a = a

input.js

  const obj = require("./output.js")
  console.log(obj); //=>{ c: "valueC1", a: "valueA1" }

當(dāng)直接給 module.exports時，exports會失效

在ES6中export default 導(dǎo)出的是一個對象
在AMD中exports和module.exports導(dǎo)出的也都是一個對象
所以如果你手中的項(xiàng)目代碼支持兩種規(guī)范，那么事可以交叉使用的（當(dāng)然不建議這么去做）
通過export導(dǎo)出的不一定是一個對象

output.js

//部分省略
module.exports = { c}
module.exports.a = a

inputj.s

import obj from "./output"
import {a} from "./output"
console.log(a);//=>valueA1
console.log(obj);//=>{ c: "valueC1", a: "valueA1" }

output.js

const a = "valueA1"
const b = "valueB1"
const c = "valueC1"
function foo() {
  console.log(`foo執(zhí)行，c的值是${c}`);
}
export {a}
export default {b,c,foo}
export 

input.js

  const a = require("./output.js")
  console.log(a); //=>{ a: "valueA1",default: { b: "valueB1", c: "valueC1", foo: [Function: foo] }, b: "valueB1" }

require，exports，module.exports屬于AMD規(guī)范，import，export，export default屬于ES6規(guī)范

require支持動態(tài)導(dǎo)入，動態(tài)匹配路徑，import對這兩者都不支持

require是運(yùn)行時調(diào)用，import是編譯時調(diào)用

require是賦值過程，import是解構(gòu)過程

對于export和export default 不同的使用方式，import就要采取不同的引用方式，主要區(qū)別在于是否存在{},export導(dǎo)出的，import導(dǎo)入需要{},導(dǎo)入和導(dǎo)出一一對應(yīng),export default默認(rèn)導(dǎo)出的，import導(dǎo)入不需要{}

exports是module.exports一種簡寫形式，不能直接給exports賦值

當(dāng)直接給module.exports賦值時，exports會失效

js導(dǎo)入導(dǎo)出總結(jié)與實(shí)踐

更多前端資源請關(guān)注微信公眾號“前端陌上寒”

原文鏈接

參考鏈接
關(guān)于import與require的區(qū)別
JS 中的require 和 import 區(qū)別
module.exports和exports和export和export default的區(qū)別，import和require的區(qū)別

我的博客即將同步至騰訊云+社區(qū)，邀請大家一同入駐：https://cloud.tencent.com/dev...