require，import區(qū)別

Rango 發(fā)布于2019-08-20 18:30 / 2731人閱讀

摘要：，區(qū)別遵循的模塊化規(guī)范不一樣模塊化規(guī)范即為提供一種模塊編寫模塊依賴和模塊運行的方案。出現(xiàn)的時間不同相關(guān)的規(guī)范由于野生性質(zhì)，在年前后出生。作為的規(guī)范，一直沿用至今。這其實要感謝原來項目名叫做，后更名為這個神一般的項目。

require，import區(qū)別 遵循的模塊化規(guī)范不一樣

模塊化規(guī)范：即為 JavaScript 提供一種模塊編寫、模塊依賴和模塊運行的方案。誰讓最初的 JavaScript 是那么的裸奔呢——全局變量就是它的模塊化規(guī)范。

require/exports 出生在野生規(guī)范當中，什么叫做野生規(guī)范？即這些規(guī)范是 JavaScript 社區(qū)中的開發(fā)者自己草擬的規(guī)則，得到了大家的承認或者廣泛的應(yīng)用。比如 CommonJS、AMD、CMD 等等。import/export 則是名門正派。TC39 制定的新的 ECMAScript 版本，即 ES6（ES2015）中包含進來。

出現(xiàn)的時間不同

require/exports 相關(guān)的規(guī)范由于野生性質(zhì)，在 2010 年前后出生。AMD、CMD 相對命比較短，到 2014 年基本上就搖搖欲墜了。一開始大家還比較喜歡在瀏覽器上采用這種異步小模塊的加載方式，但并不是銀彈。隨著 Node.js 流行和 Browsersify 的興起，運行時異步加載逐漸被構(gòu)建時模塊合并分塊所替代。Wrapper 函數(shù)再也不需要了。 2014 年 Webpack 還是新玩意，現(xiàn)在已經(jīng)是前端必備神器了。

Browsersify、Webpack 一開始的目的就是打包 CommonJS 模塊。

CommonJS 作為 Node.js 的規(guī)范，一直沿用至今。由于 npm 上 CommonJS 的類庫眾多，以及 CommonJS 和 ES6 之間的差異，Node.js 無法直接兼容 ES6。所以現(xiàn)階段 require/exports 任然是必要且實必須的。出自 ES6 的 import/export 相對就晚了許多。被大家所熟知和使用也是 2015 年之后的事了。這其實要感謝 babel（原來項目名叫做 6to5，后更名為 babel）這個神一般的項目。由于有了 babel 將還未被宿主環(huán)境（各瀏覽器、Node.js）直接支持的 ES6 Module 編譯為 ES5 的 CommonJS —— 也就是 require/exports 這種寫法 —— Webpack 插上 babel-loader 這個翅膀才開始高飛，大家也才可以稱 " 我在使用 ES6！"

這也就是為什么前面說 require/exports 是必要且必須的。因為事實是，目前你編寫的 import/export 最終都是編譯require/exports 來執(zhí)行的。

require/exports 和 import/export 形式不一樣

require/exports 的用法只有以下三種簡單的寫法：

const fs = require("fs")
exports.fs = fs
module.exports = fs

而 import/export 的寫法就多種多樣：

import fs from "fs"
import {default as fs} from "fs"
import * as fs from "fs"
import {readFile} from "fs"
import {readFile as read} from "fs"
import fs, {readFile} from "fs"

export default fs
export const fs
export function readFile
export {readFile, read}
export * from "fs"

require/exports 和 import/export 本質(zhì)上的差別

形式上看起來五花八門，但本質(zhì)上：

CommonJS 還是 ES6 Module 輸出都可以看成是一個具備多個屬性或者方法的對象；

default 是 ES6 Module 所獨有的關(guān)鍵字，export default fs 輸出默認的接口對象，import fs
from "fs" 可直接導(dǎo)入這個對象；

ES6 Module 中導(dǎo)入模塊的屬性或者方法是強綁定的，包括基礎(chǔ)類型；而 CommonJS 則是普通的值傳遞或者引用傳遞。

1、2 相對比較好理解，3 需要看個例子：

// counter.js
exports.count = 0
setTimeout(function () {
  console.log("increase count to", exports.count++, "in counter.js after 500ms")
}, 500)

// commonjs.js
const {count} = require("./counter")
setTimeout(function () {
  console.log("read count after 1000ms in commonjs is", count)
}, 1000)

//es6.js
import {count} from "./counter"
setTimeout(function () {
  console.log("read count after 1000ms in es6 is", count)
}, 1000)

分別運行 commonjs.js 和 es6.js：

?  test node commonjs.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in commonjs is 0
?  test babel-node es6.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in es6 is 1

鏈接：https://www.zhihu.com/questio...
來源：知乎