require和import的區別在哪

在vue+webpack的項目中,裏面有使用require來引入文件,也有的用import來引入文件,兩者之間是一樣的嗎?


兩者的出身背景

ES6之前已經出現了js模塊加載的方案,最主要的是CommonJS和AMD規範。commonjs主要應用於服務器,實現同步加載,如nodejs。AMD規範應用於瀏覽器,如requirejs,爲異步加載。同時還有CMD規範,爲同步加載方案如seaJS。


1. require/exports

CommonJS——聽起來就很高大上的名字,就是它填補了JS沒有模塊的空能空缺,它的目標是讓JS不止在瀏覽器中運行,可以在各個地方都能運行,或者說是提供一個類似Python,Ruby和Java標準庫。

而NodeJS是以CommonJS規範實現,Webpack也是以CommonJS規範書寫的

node.js的模塊系統,就是參照CommonJS規範實現的。在CommonJS中,有一個全局性方法require(),用於加載模塊。


CommonJS定義的模塊分爲:{模塊引用(require)} {模塊定義(exports)} {模塊標識(module)}

2. import/export

ES6在語言規格的層面上,實現了模塊功能,而且實現得相當簡單,完全可以取代現有的CommonJS和AMD規範,成爲瀏覽器和服務器通用的模塊解決方案。


ES6模塊主要有兩個功能:export和import

export用於對外輸出本模塊(一個文件可以理解爲一個模塊)變量的接口

import用於在一個模塊中加載另一個含有export接口的模塊。

也就是說使用export命令定義了模塊的對外接口以後,其他JS文件就可以通過import命令加載這個模塊(文件)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章