自從 ES6 被推出後，很多小夥伴的項目裏都或多或少地出現了 import、export default 的身影，當然，應該也還存在着 require、exports 。在最初學習js的時候，一直搞不懂這幾個的區別，以及使用場景。直到某一天業務中真實需要使用，就好好摸索了一番。
一、區別
（1）require
require 是 CommonJS 的規範，而 node 是由模塊組成的，基於 commonJS 規範。
- node 使用 require/exports
// count.js
exports.count = 0
// test.js
const {count} = require('./counter')
console.log(count); // 0
const count = require('./counter')
console.log(count); // { count: 0 }
- 使用：require/module.exports
// count.js
let count = 0
module.exports = count;
// test.js
const count = require('./counter')
console.log(count); // 0
（2）import/export
import/export是 ES6 正式標準下的產物，使用起來比上面的更復雜。
- 普通使用
// user.js 一個文件可以這樣 export 多個
export const getPermission = { xxx }
export const getAcl = { xxx }
// test.js
import { getPermission, getAcl } from './user.js'
- 默認導出
// user.js 一個文件只能 export default 一次
export default generate
// test.js
import generate from './user.js'
-
export 和 export default 區別：
- 在一個文件或模塊中，export、import可以有多個，export default僅有一個
- 通過export方式導出，在導入時要加{ }，export default 則不需要
- export能直接導出變量表達式，export default 不行。
（3）require/exports 和 import/export 區別
ES6的模塊化已經不是規範了，而是JS語言的特性。隨着ES6的推出，AMD和CMD也隨之成爲了歷史。ES6模塊與模塊化規範相比，有兩大特點：
- 模塊化規範輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。
- 模塊化規範是運行時加載（同步），ES6 模塊是編譯時輸出接口。
- require可以寫在任意位置，import只能寫在文件的最頂端且不可在條件語句或函數作用域中使用。
- require通過module.exports導出的值就不能再變化，import通過export導出的值可以改變。
- require通過module.exports導出的是exports對象，import通過export導出是指定輸出的代碼。
- require運行時才引入模塊的屬性所以性能相對較低，import編譯時引入模塊的屬性所所以性能稍高。
模塊化規範輸出的是一個對象，該對象只有在腳本運行完纔會生成。而 ES6 模塊不是對象，ES6 module 是一個多對象輸出，多對象加載的模型。從原理上來說，模塊化規範是匿名函數自調用的封裝，而ES6 module則是用匿名函數自調用去調用輸出的成員。
二、使用場景
require的使用非常簡單，它相當於module.exports的傳送門，module.exports後面的內容是什麼，require的結果就是什麼，對象、數字、字符串、函數……再把require的結果賦值給某個變量，相當於把require和module.exports進行平行空間的位置重疊。而且require理論上可以運用在代碼的任何地方，甚至不需要賦值給某個變量之後再使用，比如：
require('./count')(); // count模塊是一個函數，引入後立即執行該函數
let data = require('./count').data; // count導出的是一個對象
let arr = require('./count')[0]; // count導出的是一個數組
import則是編譯時運行，必須放在文件開頭，而且使用格式也是確定的。它不會將整個模塊運行後賦值給某個變量，而是隻選擇import的接口進行編譯，這樣在性能上比require好很多。
注意：在項目中，npm 引入第三方模塊，通常使用 require/exports。