淺談JavaScript ES6的import與import{}及export及export default使用方式

前言

JavaScript在ES6中引進Module系統,讓JavaScript可以模組化的開發 ── import、export。在此之前,社群已有許多優秀的三方庫可以做到,其中最容易被看見的我想應該就是Node.Js原生支援的commonJs的require了!

而Node.Js 9版已可以原生使用ES6語法,但得在flag啟用--experimental-modules才行(具體作法詳見參考資料)

目前使用import還是會配合babel打包,輸出結果仍會是require

但隨著時間漸漸普及化後,我想最終還是會回到JavaScript原生功能上

我想能用上ES6語法,就盡量使用吧!也避免未來有大升級時還得跟著改…反正有萬能的babel!

具體的實現原理我也不是相當理解,只知道跟解構賦值有關係

但不管理不理解原理,至少要知道該怎麼使用,而不是每次都在猜猜看這次的import要不要加{}

export vs export default

最大的差別就是:同一份js檔案,export可以有無限多個,export default只能有一個!

使用default的話,你得把要export的所有東西寫進一個{}裡面

1
2
3
4
5
6
7
8
9
10
11
12
13
export const a = 123;
export const myFunc = ()=>{console.log('this is myFunc')}
//...可以有一大堆export

//------上面是export,下面是export default的分隔線------

const test = () => '這個test function要從default匯出的';

export default {
b: 'b',
test,
test2: () => 'test2 function'
}

你也可以在一份文件裡同時使用export與export default

可以把前述例子存成一份js檔後由另一份import,會發現所有函式都可以import進來使用(import abc,{a,myFunc} from './xxx')

那為什麼還要有default呢?

主要是在另一份js檔要import時是否需要寫{}

若是用export default,在別的js檔import時不必{}

import vs import {}

import中需不需要寫{},則是看引入的文件是否有使用到default

若不是用default,js檔引用時需要用{}個別將要使用的函式寫出來,而書寫別名的方式則是import{ a as myA,myFunc as myOwnFunc } from './xxx'

若是不知道這個module有哪些export,往往得去看原始碼或著翻閱文件來import要用到的功能

注意!用{}import進來的函式名稱,要完全跟該模組export一樣的名字,不然會報錯。但仍然可以使用as來自定義名稱

因此可以把default看成as的語法糖

在引入時,不加{},直接寫成import anyNameYouLike from './xxx'

而呼叫裡面的功能就是anyNameYouLike.testanyNameYouLike.b


通常我們習慣的寫法,import的模組會跟該模組的名字一樣

比如import lodash from 'lodash',使用時就是用lodash.chunk()

用過lodash或去官方看就會知道官方都用_來import

所以我們會寫成import _ form 'lodash',使用時就會是_.chunk()

正是因為使用default export的關係,所以在import時可以這樣子寫

同理,jquery一樣

為了使用起來跟以前一樣,我們都會寫成import $ from 'jquery',而不會寫成import jquery from 'jquery'

後記

我自己的習慣上,則是盡量使用export default,不但可以少寫{},在使用上也比較符合其他語言的書寫方式

減少語言轉換時寫錯的機會

而使用default,VS Code會提示.後面有哪些函式可以用,開發上也比較舒服些

參考資料

stack overflow/When should I use curly braces for ES6 import?

CNode/Node 9下import/export的丝般顺滑使用

Node中没搞明白require和import,你会被坑的很惨