import 和require的區別,import 和js的發展歷史息息相關,歷史上 js沒有模塊(module)體系,無法將一個大程序拆分成互相依賴的小文件,再用簡單的方法拼裝起來。 在 ES6 之前,社區制定了一些模塊加載方案,最主要的有 CommonJS 和 AMD 兩種。前者用於伺服器,後者用於瀏覽器。ES6 在語言標準的層面上,實現了模塊功能,而且實現得相當簡單,完全可以取代 CommonJS 和 AMD 規範,成為瀏覽器和伺服器通用的模塊解決方案。也就是我們常見的 require 方法。 比如 `let { stat, exists, readFile } = require('fs');ES6 在語言標準的層面上,實現了模塊功能。ES6 模塊不是對象,而是通過export命令顯式指定輸出的代碼,再通過import命令輸入。
import 的幾種用法:
import用法解釋
import後面的from指定模塊文件的位置,可以是相對路徑,也可以是絕對路徑,.js後綴可以省略。如果只是模塊名,不帶有路徑,那麼必須有配置文件,告訴 JavaScript 引擎該模塊的位置。某些打包工具可以允許或要求使用擴展名。上面代碼使用的 ==as== 關鍵字,相當於import 進來的『值』的別名。import * from 'xx' 將導入整個模塊的內容,而 import defaultName 和 import { export1, export2 } 將導入export的某個對象或值最後一種方式 import 'modules' 將運行模塊中的全局代碼,而不導入任何值。import的形式需要export的支持,比如 import defaultName from 'module.js 將導出 在modules.js中export default的對象或值。
如上,export也是es6的內容,和import是一對。export的幾種用法:
export用法解釋,命名導出
對應的import 寫法:import { ex1, demoFun, ex2, multiply } from 'module.js';
默認導出,export 命名導出需要export 名字和import名字嚴格一致。而export default命令,為模塊指定默認輸出,在import 的時候可以隨意命名名字。一個模塊只能有一個默認輸出,也就是說 export default 一個模塊只能用一次。 用法:
export 和 import 混合使用(模塊重定向)也就是在一個模塊之中,先輸入後輸出同一個模塊。比如: