淺談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的所有東西寫進一個{}裡面
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.test、anyNameYouLike.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?