本文已搬家到筆者自己的部落格嘍，有興趣的可以點這個連結～

前言

昨天講完如何安裝別人寫好的套件，今天就來實作如何 import(匯入) 以及 export(匯出) 別人寫好或自己寫好的套件吧！

import

import 基本上寫法很簡單就只有 import name from 'module' 這樣而已，這邊簡單闡述一下這段文字表達的意思。

• import

  import 很直觀就是匯入的意思。

• name

  代表將匯入的套件用一個變數表示，這裡的變數取名基本上建議跟官方文件一樣，這樣才不會出錯。

• from

  從哪個地方匯入套件。

• 'module'

  套件路徑，這邊可以分為 node_modules 內的套件以及自己寫好的套件，會在底下說明。

接下來講講 node_modules 內的套件以及自己寫好的套件兩者的差別吧！

• node_modules內的套件

  import $ from 'jquery'
  

  如果要匯入的是 node_modules 內的套件直接寫套件名稱就好，這樣就會自動到 node_modules 裡面找尋該套件。

• 自己寫的套件

  import config from './config.js'
  

  如果是自己寫的套件就必須要用相對路徑的方式將檔案匯入進來，畢竟 node_modules 不可能會有自己專案裡面寫的檔案XD

  不過上面的寫法其實可以再更精簡一點，可以把副檔名拿掉，反正要匯入的都是JS檔所以就可以直接移除JS副檔名，像底下這樣。

  import config from './config'
  

export

export 的語法有兩種，一種是 export name 另一種是 export default name 兩者到底差別在哪呢？

其實差別只在於在 import 時，如果是單純的 export name 話，在 import 時就必須要將 name 定義的跟 export 的 name 一模一樣，所以就要寫成 import { name } from 'module' ，但假如是寫 export default name 的話，在 import 的時候就不用將 name 定義的跟 export 的 name 一樣，相對會彈性很多，所以筆者建議還是寫成 export default name 比較好喔！

• export

  export 很直觀就是匯出的意思。

• default

  default 就是指該檔案匯出的預設值。

• name

  name就代表要匯出的東西，可能是變數、function等等，只要任何可以被當成變數傳遞的都可以 export ，假如要匯出多筆的話筆者建議用一個 {} 把要匯出的東西都包起來。

  還記得前面提到 ES6 裡面有個語法叫 Object Literals 嗎？這邊就是運用這種寫法把匯出的東西包成一個物件，這樣之後匯入的時候就可以利用物件的操作來使用匯入後的資料。

const foo = () => console.log('Hello')
const foo2 = () => console.log('World')
const foo3 = () => console.log('Hello World')
export default { foo, foo2, foo3 }

export 基本上沒意外都只會用在自己寫好的套件上，筆者相信應該是不會有人會去更改別人寫好的套件然後再自己 export 才對XD

打開網頁錯誤

好不容易知道 import 以及 export 在做什麼後，也依照文章所教的方式把 import 跟 export 寫到了JS檔裡面，結果瀏覽器竟然噴了這個錯誤。

這邊筆者就要稍微埋一下伏筆了，因為目前的瀏覽器其實並沒有真的支援 import 以及 export 的寫法，在明天的文章會教大家如何把套件結合在一起，讓瀏覽器可以正常地顯示出這些東西，敬請期待吧XD

總結

今天介紹了如何匯入以及匯出，匯入及匯出的功能基本上是目前在寫網頁必備的觀念，學會匯入與匯出這兩個方法可以讓你在日後維護網頁上更加輕鬆，並且可以很快速的知道要從哪些檔案進行修改，最後如果有任何不懂的地方也歡迎在下面留言給我，我會一一解惑喔！

參考資料

• import

• export