如何在專案中使用 ES6 import / export 語法 Part I: 前端

ECMA International 於 2015 年 6 月 17 日發布第六版的 ECMAScript,其正式名稱是 ECMAScript 2015,瀏覽器的語法支援可以參考這個網站

💁ECMAScript compatibility table

先來看看import/export瀏覽器的支援狀況吧,

很不幸,幾乎主流瀏覽器都不支援,此時就必續透過 babel進行編譯,將 es2015 編譯成 es5,遺憾的是 babel 並不處理 import/exportmodule bundle 的工作,接著,本文將分別介紹前端以及後端的做法,讓讀者能夠快樂的使用 ES6 直覺的 import/export

前端 — Gulp

首先安裝相關的 devDependencies,

npm install babel-preset-es2015 babelify browserify gulp gulp-util ---save

其中,

  • babel-preset-es1015 是為了讓我們能夠在 gulpfile 也能寫 import/export 👍
  • browserify 爬梳你的程式碼的相互關聯,最後整合成一支檔案
  • babelify browserify 的插件,使 browserify 能解析 es2015,包含import/export

package.json 配置如下,

package.json

gulpfile.babel.js

在專案根目錄下撰寫 gulpfile 檔案,請注意檔名後綴的部分.babel.js ,表示我們這份 gulpfile 裡面,含有 es2015 語法,需要babel 來進行解析,這也是需要npm install babel-preset-es1015 的原因,

.babelrc

請記得撰寫一份 .babelrc 💡解析這份 gulpfile.babel.js,別擔心只有短短的一小段:)

// .babelrc
{
"presets": ["es2015"]
}

開始撰寫 gulpfile 吧,gulp 的運作方式是一種稱做 stream function 概念,一段做完就 pipe 給下一段,一段段接起來處理檔案,最後 bundle 出一支檔案。

注意到了嗎?可以使用 import 了喔 💡

實作一下

創建兩支檔案 calc.js main.js ,來練習一下 export/import 吧,你已經可以使用 es2015 的語法了

這邊是分開的兩支檔案喔

接著在 terminal 執行 $ gulp es6 即可得到一支 bundle 後的檔案,

💡記得去修改 gulpfile stream function 第一段,對 main.js 進行編譯
return browserify({ entries: ['yourpath/to/main.js'] })

如果我想 bundle 出多支檔案…

到目前為止, 在前端已經可以無痛使用各種 es2015 的新特色,回到 gulpfile ,可以觀察到一但進行 bundle ,一個 stream 只會產出一支檔案,表示個別檔名等資訊會消失,通常網站各頁面都有各自的 js 檔,如 index.js shopping.js home.js …等,這時候做法如下,

  • 一次 bundle 一支,一支一支 bundle …無限多的 gulp task 😡
  • 一次 bundle 一個 stream array 🏞

最後一行尤為重要,將多條 stream merge 為單一 stream 並返回,對 gulp 來說只要做一個 task 即可。

感想

習慣模組化開發後,習慣用 webpack 等後端 render 方式來寫前端,最近接觸 gulp 有一種反璞歸真的感覺,一方面能降低之後維護者的開發門檻,一方面也對 es2015 與瀏覽器的運作更加熟悉了。

📚參考資料

  1. MDN
  2. Gulp: Creating multiple bundles with Browserify
  3. jpsierens/es6-babel6
Like what you read? Give LeeBoy a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.