談談import和require的區別

0end1發表於2019-01-22
ImportUI

粗鄙苟談，歡迎評論區指正

import和require都是node程式設計中最重要的思想就是模組化的體現。

歷史

最開始的開端js發明出來就是為了在瀏覽器上做個動效，做個表單提交，定義為瀏覽器應用程式的語言，但之後由Mozilla工程師Kevin Dangoor於2009年1月開始構建的CommonJS出現了，CommonJS API定義很多普通應用程式（主要指非瀏覽器的應用）使用的API，目標是在瀏覽器外部為JavaScript指定生態系統。

隨著2009年有個叫Ryan Dahl創造了node.js專案，Node.js允許通過JavaScript和一系列模組來編寫伺服器端應用和網路相關的應用。Node.js已經有數十萬模組，它們可以通過一個名為npm的管理器免費下載。

而NODE和NPM都是遵循CommonJS規範（做了一些取捨，填了一些新東西）應運而生的。

import和require

前面講了很多歷史，很迷糊，而且與本文要講的並沒有啥相關性。

彆著急，少年。

之前說了node程式設計中的模組系統是基於CommonJS規範的，在CommonJS中，有一個全域性性方法require()，用於載入模組。比如node程式設計裡要加入一個HTTP模組，如下：

const http = require('http')
exports.http = http
module.exports = http
複製程式碼

而import用於載入模組就比較多樣了

import http from 'http'
import {default as http} from 'http'
import * as http from 'http'
import {get} from 'http'
import {getList as get} from 'http'
import http, {getList} from 'fs'

export default http
export const http
export function getList
export {getList, get}
export * from 'http'
複製程式碼

區別

命令 規範 呼叫 本質 特點
require CommonJS規範 執行時呼叫 賦值過程 非語言層面的標準。 社群方案，提供了伺服器/瀏覽器的模組載入方案。只能在執行時確定模組的依賴關係及輸入/輸出的變數，無法進行靜態優化。
import es6+的語法標準 編譯時呼叫 解構過程 語言規格層面支援模組功能。支援編譯時靜態分析，便於JS引入巨集和型別檢驗。動態繫結

關於規範

import是es6的一個語法標準，如果要相容瀏覽器的話必須轉化成es5的語法。

關於呼叫

  1. require的引用可以在程式碼的任何地方。
  2. import語法規範上是放在檔案開頭。

關於本質

  1. require的結果就是物件、數字、字串、函式等，再把require的結果賦值給某個變數
  2. 目前所有的引擎都還沒有實現import，我們在node中使用babel支援ES6，也僅僅是將ES6轉碼為ES5再執行，import語法會被轉碼為require

相關文章