前言
Modern JavaScript Tools and Skills 是 SitePoint 所出版的 The Modern JavaScript Collection 套書中的第二本。該套書共有四本:
- Practical ES6
- Modern JavaScript Tools and Skills,本文所要介紹的書籍
- JavaScript: Best Practice
- 6 JavaScript Projects
JavaScript 已經問世 20 多年了,在這段時間內,JavaScript 和網頁技術產生許多的變化。該系列書籍期望能帶來到西元 2018 年為止的最新實務。本書注重 JavaScript 相關工具鏈的介紹,如果想學 JavaScript 的語法,建議回頭閱讀 Practical ES6。
本書共 143 頁,分為 7 章,算是一本輕量級的書籍。我們接下來會逐一介紹各章節。
Chapter 1: A Beginner's Guide to Babel
Babel 是現代 JavaScript 相當重要的一個工具,因為我們在撰寫網頁應用程式時,不能不考慮瀏覽器相容性的議題。Babel 會將含有 ES6+ 特性的 JavaScript 程式碼轉成相對應的 ES5 程式碼;我們可以在開發時期享受新的語法特性,但發佈的程式可相容於相對舊的瀏覽器。
本章介紹如何建置 Babel,撰寫設定檔,使用相關外掛 (plugins) 等。由於 Babel 後來進行大版本更新,有一部分步驟會和書本所述相異,但觀念上仍可通用。
Chapter 2: A Beginner's Guide to Webpack 4 and Module Bundling
Webpack 是 JavaScript 生態圈重要的 bundler,用於打包 JavaScript 和 CSS 等網頁前端資產。由於 webpack 官方文件相對不易閱讀,本章適時地補充官方文件的不足之處。
Chapter 3: An Introduction to Gulp.js
Gulp 是 JavaScript 生態圈的自動化建置 (build automation) 軟體,用於簡化開發流程。在 Gulp 出現之前,Grunt 是較流行的方案,但 Gulp 有一些優點:
- 速度較快
- 外掛系統較易用
- 易於撰寫設定檔
本章是 Gulp 的入門級教程,對 Gulp 不熟悉的讀者可以一步步跟著學。
Chpater 4: 10 Languages That Compile to JavaScript
本章簡介 10 個 JavaScript 轉譯語言:
- Dart
- TypeScript
- Elm
- PureScript
- CoffeeScript
- ClojureScript
- Scala.js
- Reason
- Haxe
- Nim
有一些經驗的程式人就會知道要在這麼少的容量塞入這些內容是不太實際的做法,因此,本章偏向於概論,對某項語言有興趣的讀者可再閱讀其他資料。
Chapter 5: 10 Must-have VS Code Extensions for JavaScript Developers
VS Code 是近年來很火熱的編輯器,其外掛 (plugin) 相當豐富。本章快速地介紹一些 VS Code 中和 JavaScript 相關的外掛,但沒有深入介紹其使用方式。筆者在閱讀這類文章時,不會一股腦將這些外掛全部裝下去,因為這些外掛有一部分功能重疊,可能會相衝;此外,過多外掛會使編輯器變慢。讀者可從本章中慢慢挑選自己需要的外掛。
Chapter 6: Debugging JavaScript Projects with VS Code & Chrome Debugger
本章藉由一些故意寫錯的範例來練習一些除錯的情境:
- 在 VS Code 中除錯
- 以 Mocha 測試來除錯
- 在 Chrome Debugger 中除錯
由於除錯器需要實際使用過比較容易上手,建議不熟悉除錯器的讀者可跟著範例實際練習看看。
Chapter 7: Introducing Axios, a Popular, Promise-based HTTP Client
註:原書誤植為 Chapter 6。
現在網頁應用程式的趨勢是儘量不用 jQuery,而會使用前端框架,像是 React 或 Vue,因為後者對撰寫單頁應用程式 (Single Page Application) 較有優勢。但這些前端框架沒有 jQuery 中有關 AJAX 的功能,這時候就可以用 Axios 來取代相對肥大的 jQuery。
ES6 後已有 fetch API,為什麼還要引入 Axios 呢?
- Axios 對錯誤碼的處理較佳
- Axios 支援資料傳輸進度條
- Axios 可用於網頁和 Node.js,而 fetch API 僅能用在網頁
- Axios 同時支援現代瀏覽器 Internet Explorer 8+
Axios 的 API 以 promise 為基礎,算是蠻易用的,有興趣的讀者可以詳讀本章。
結語
由於工具的變化往往比程式語言快,這類書籍的壽命相對較短。閱讀這類書籍的重點在於知道有這些工具,之後就有機會派上用場;不用在閱讀的當下就急著安裝使用。有時候官方文件寫得較簡略,這類書籍剛好可以補足官方文件的不足。
本書承襲 SitePoint 系列書籍輕薄短小的特性,閱讀一次應該不會花太久的時間。但 JavaScript 有許多的議題,僅以 140 多頁的份量是無法完整交待的,所以 the Modern JavaScript Collection 這個系列以四本書的容量來介紹 JavaScript,讀者可視自己的需求單獨購買或成套購買。