模塊化操作主要包括兩個(gè)方面。
export :負(fù)責(zé)進(jìn)行模塊化,也是模塊的輸出所禀。
import : 負(fù)責(zé)把模塊引,也是模塊的引入操作放钦。
export的用法:
export可以讓我們把變量色徘,函數(shù),對(duì)象進(jìn)行模塊話最筒,提供外部調(diào)用接口,讓外部進(jìn)行引用蔚叨。先來看個(gè)最簡(jiǎn)單的例子床蜘,把一個(gè)變量模塊化。我們新建一個(gè)temp.js文件蔑水,然后在文件中輸出一個(gè)模塊變量邢锯。
export var a = 'jspang';
然后可以在index.js中以import的形式引入。
import {a} from './temp.js';
console.log(a);
cmd命令模塊輸入
babel-node index.js 要注意目錄
多變量的輸出(temp.js)
var a ='jspang';
var b ='技術(shù)胖';
var c = 'web';
export {a,b,c} //包裝成對(duì)象{}
函數(shù)的模塊化輸出(temp.js)
export function add(a,b){
return a+b;
}
as的用法
有些時(shí)候我們并不想暴露模塊里邊的變量名稱搀别,而給模塊起一個(gè)更語義話的名稱丹擎,這時(shí)候我們就可以使用as來操作。
var a ='jspang';
var b ='技術(shù)胖';
var c = 'web';
export {
x as a,
y as b,
z as c
}
index.js
import {x,y,z} from './temp.js';
export default的使用
加上default相當(dāng)是一個(gè)默認(rèn)的入口。在一個(gè)文件里export default只能有一個(gè)蒂培。
我們來對(duì)比一下export和export default的區(qū)別
1.export
export var a ='jspang';
export function add(a,b){
return a+b;
}
//index.js引入
import {a,add} form './temp';//也可以分開寫
2.export defalut
export default var a='jspang';
//index.js引入
import str from './temp';