今天是第 12 天，不知大家有沒有遇過，如果要引入文件的時候，有時候是用 require，有時候是用 import，像我就是在 Node.js 使用 require，Vue.js 是用 import。
同樣是引入，那這兩者有什麼差別呢？我想趁這個機會來簡單筆記一下，並分享給大家~~

require/exports

2010 年前後，出生在野生規範，也就是 JavaScript 社群的開發者們自己擬定的規範，並且被大家廣泛地使用。遵循的是 CommonJS 規範，是為伺服器端開發設計的，而 Node.js 是 CommonJS 規範的實現。
CommonJS 規範是以同步的方式載入模組，換句話說，要載入完成後，才能執行後面的操作。

運行時動態加載，是為賦值的過程，把 require 的結果 ( String、Number、Function、Object 等 ) 輸出並賦值給某個變數。

輸出的是值的拷貝，
其中當輸出的是基本型別時，屬於值的拷貝；
當輸出的是物件型別時，屬於物件的淺拷貝。
CommonJS 默認 export 的是物件，即使輸出的是基本型別。

const file = require('file')
exports.file = file
module.exports = file

import/exports

2015 年，為 ES6 Modules，在 ES6 新加進來的。

靜態編譯，在編譯過程中執行。

輸出的是值的引用。
不管是基本或是物件型別，都只能讀取引用。

如果遇到不支援 ES6 的情況下，就需要 webpacker + babel 來轉譯成 require/exports。

import file from 'file'  // 引入只有一個模組且不具名的檔案，並重新賦予名稱(file)
import * from 'file'  // 引入全部模組
import { default as file } from 'fs'  // 引入 export default 的模組
import { * as file } from 'fs'  // 全部引入並重新賦予名稱(file)
import { moduleName as file } from 'fs'  // 引入名為 moduleName 的模組，並重新賦予名稱(file)
import { moduleName } from 'fs'  // 引入名為 moduleName 的模組
import { moduleName1, moduleName2 } from 'fs'  // 同時引入多個模組

export default file
export const moduleName
export function moduleName
export { moduleName1, moduleName2 }
export * from 'file'

今天比較匆忙(汗)，如果有誤，敬請指教^^

參考資料：
require和import差異
js使用require 和 import 引入依賴的區別？
require，import區別？

文章同步更新於 medium