在寫代碼的時候,總是被各式各樣的模塊規(guī)范所迷惑,來看看這些方式有什么區(qū)別吧
require: node 和 es6 都支持的引入
export / import : 只有es6 支持的導(dǎo)出引入
module.exports / exports: 只有 node 支持的導(dǎo)出
Node
module.exports / exports 是遵循CommonJS規(guī)范的一套規(guī)范,
其實(shí)在node編譯過程中,node會把js進(jìn)行頭尾包裝,會傳入require，exports荆忍，module這幾個變量格带。
一段正常的代碼:
var gulp = require('gulp');
gulp.task('help', function() {
console.log('----------------------------------------');
console.log('gulp 開發(fā)模式');
console.log('gulp build 部署模式');
console.log('----------------------------------------');
});
node包裝后=>
(function (exports, require, module, __filename, __dirname) {
var gulp = require('gulp');
gulp.task('help', function() {
console.log('-----------------------------------');
console.log('gulp 開發(fā)模式');
console.log('gulp build 部署模式');
console.log('-----------------------------------');
});
});
第一個參數(shù)就是我們的exports,這個參數(shù)其實(shí)是module.exports的一個別名,他們倆指向的是同一塊內(nèi)存地址,但是在別的模塊使用require引入的時候,返回的是module.exports引用的內(nèi)容
其實(shí)不是的,在用法上,你可以直接在module.exports上賦值,比如:
module.exports = {
a:'',
b:'',
c:''
}
這樣是沒有任何問題的,因為最終引用的是module.exports引用的內(nèi)容,但是這樣的話:
exports = {
a:'',
b:'',
c:''
}
這樣就切斷了exports和module.exports之間的聯(lián)系,并且這個Object并不會被require等方式取到,這其實(shí)是一段沒有任何實(shí)際意義的代碼。
ES6
相對于Node中的模塊規(guī)范,ES6的模塊就比較清晰了,import,import {},export,export default.
- export 和 export default
首先了解一下這倆的區(qū)別
export與export default均可用于導(dǎo)出常量刹枉、函數(shù)叽唱、文件、模塊等
在一個文件或模塊中嘶卧，export尔觉、import可以有多個，export default僅有一個
通過export方式導(dǎo)出芥吟，在導(dǎo)入時要加{ }侦铜，export default則不需要
export能直接導(dǎo)出變量表達(dá)式专甩，export default不行。
- import 和 import {}
這兩個基本上不需要說的,前者是直接引入export default,后者是es6的解構(gòu)賦值,用于引入單個export
