庫存狀況
「香港二樓書店」讓您 愛上二樓●愛上書
我的購物車 加入會員 會員中心 常見問題 首頁
「香港二樓書店」邁向第一華人書店
登入 客戶評價 whatsapp 常見問題 加入會員 會員專區 現貨書籍 現貨書籍 購物流程 運費計算 我的購物車 聯絡我們 返回首頁
香港二樓書店 > 今日好書推介
   
二樓書籍分類
 
JS絕對版本相容性:Webpack+Babel完美結合開發實戰

JS絕對版本相容性:Webpack+Babel完美結合開發實戰

沒有庫存
訂購需時10-14天
9786267146262
姜瑞濤
深智數位
2022年7月20日
207.00  元
HK$ 175.95  






ISBN:9786267146262
  • 規格:平裝 / 336頁 / 17 x 23 x 1.65 cm / 普通級 / 單色印刷 / 初版
  • 出版地:台灣


  • 電腦資訊 > 網頁開發設計 > 其他網頁設計











      零基礎前端開發新手也能輕鬆上手的前端 Pre-process 自動化編譯!

      許多初學者剛開始學習前端開發時,面臨搜尋引擎中紊亂無條理的前端框架教學資料,仍搞不清楚到底要學什麼;即使寫好所有 Pre-process,卻沒有一個前端自動化工具編譯這些 Pre-process。



      Webpack 與 Babel 為現代前端工程領域最核心的兩大工具,就是自動化編譯的救星!本書系統性的撰寫風格就是引導你入門 Webpack 與 Babel 的指南針,讓你成為一位概念清晰又操作泰然的開發者。



      【Webpack+Babel 兩大核心工具完全攻略!】

      本書精選 Webpack 以及 Babel 兩大主題編排而成,Webpack 部分為前 8 章,Babel 部分則為後 4 章,兩部分之區分相輔相成,讓讀者更方便參考,知悉兩大核心工具的精髓。



      ◎[Webpack] → CSS 引入�ES6 模組�CommonJS�資源出入口實作�最常用外掛程式開發�前置處理器 file-loader 及 url-loader 配置與使用�環境設定�模組熱替換�性能最佳化



      ◎[Babel] → 安裝設定及轉碼�外掛程式的選擇�babel-polyfill 的使用�@babel/preset-env 的使用�@babel/plugin-transform-runtime 的使用�最常用工具應用全集�入門原理介紹



      ◎本書程式實作適用於 Webpack v5.0.0 與 Babel v7.0.0 後版本



    本書特色



      JavaScript Developer 必備的工具書!



      ★ 自己學或產業開發都派得上用場

      自學者或 IT 產業人士無需再感到孤單,本書實用性極高,從【入門概念到開發應用】一次打包給你,是十分值得入手的 JS 工具用書選擇。



      ★ 系統性整理的撰寫風格

      本書主要用【系統性的整理手法】來梳理 JS 新手使用 Webpack 與 Babel 較不容易理解的概念,讓新手讀者輕鬆上手。



      ★ 範例程式 Bonus!

      本書搭配完整的 code 於深智官網,【免費下載】,方便讀者跟著每個章節步驟實作時更容易掌握 JS 所具備的細節,找到自己的開發價值。

    ?


     





    ▎Ch01 Webpack 入門??????

    1.1 Webpack 簡介?????

    1.2 安裝 Webpack 5?

    1.3 Webpack 快速入門?????

    1.4 Webpack 前置處理器?

    1.5 本章小結

    ?

    ▎Ch02 Webpack 資源入口與出口??

    2.1 模組化????

    2.2 Webpack 資源入口

    2.3 Webpack 資源出口?????

    2.4 hash、fullhash、chunkhash 和 contenthash 的區別

    2.5 本章小結

    ?

    ▎Ch03 Webpack 前置處理器??

    3.1 前置處理器的設定與使用????

    3.2 Babel 前置處理器 babel-loader??????

    3.3 檔案資源前置處理器 file-loader??????

    3.4 增強版檔案資源前置處理器 url-loader???

    3.5 本章小結

    ?

    ▎Ch04 Webpack 外掛程式??????

    4.1 外掛程式簡介

    4.2 清除檔案外掛程式 clean-webpack-plugin????

    4.3 複製檔案外掛程式 copy-webpack-plugin?????

    4.4 HTML 範本外掛程式 html-webpack-plugin?

    4.5 本章小結

    ?

    ▎Ch05 Webpack 開發環境設定??????

    5.1 檔案監聽與 webpack-dev-server???

    5.2 模組熱替換????

    5.3 Webpack 中的 source map?????

    5.4 Asset Modules?????

    5.5 本章小結

    ?

    ▎Ch06 Webpack 生產環境設定??????

    6.1 環境變數

    6.2 樣式處理

    6.3 合併設定 webpack-merge

    6.4 性能提示

    6.5 本章小結

    ?

    ▎Ch07 Webpack 性能最佳化??

    7.1 打包體積分析工具 webpack-bundle-analyzer?????

    7.2 打包速度分析工具 speed-measure-webpack-plugin

    7.3 資源壓縮

    7.4 縮小尋找範圍

    7.5 程式分割 optimization.splitChunks???????

    7.6 搖樹最佳化 Tree Shaking??

    7.7 使用快取

    7.8 本章小結

    ?

    ▎Ch08 Webpack 原理與拓展??

    8.1 Webpack 建構原理?????

    8.2 Webpack 前置處理器開發

    8.3 Webpack 外掛程式開發?????

    8.4 本章小結

    ?

    ▎Ch09 Babel 入門?????

    9.1 Babel 簡介????

    9.2 Babel 快速入門????

    9.3 引入 polyfill

    9.4 本章小結

    ?

    ▎Ch10 深入 Babel????

    10.1 Babel 版本??

    10.2 Babel 設定檔??????

    10.3 預設與外掛程式的選擇

    10.4 babel-polyfill??????

    10.5 @babel/preset-env??

    10.6 @babel/plugin-transform-runtime

    10.7 本章小結?????

    ?

    ▎Ch11 Babel 工具?????

    11.1 @babel/core??????

    11.2 @babel/cli??

    11.3 @babel/node????

    11.4 本章小結?????

    ?

    ▎Ch12 Babel 原理與 Babel 外掛程式開發??

    12.1 Babel 原理??

    12.2 Babel 外掛程式開發??

    12.3 本章小結?????

    ?

    ▎附錄 A Module Federation 與微前端?

    ▎附錄 B Babel 8 前瞻

    ?









      Webpack 和 Babel 是前端工程領域最核心的兩大工具。我回想起,自己最初從事前端開發工作的時候,面對著技術論壇雜亂的 Webpack 和 Babel 資料,在很長一段時間內都感到迷惑與不解。



      做前端開發工作的第一年,我被 Babel 的那堆 babel-preset-es2015、babel-preset-es2016、babel-preset-stage-0、babel-preset-stage-1、@babel/preset-env 和 @babel/plugin-transform-runtime 設定項目搞得暈頭轉向,經常問自己到底該用哪些設定項目,到底該怎麼設定。



      我處於這種混亂的狀態整整一年之後,才漸漸對 Babel 有所認知,但是這種認知也很不全面。我從 Babel 6 到 Babel 7 學到的大量知識都是錯誤的和即將被淘汰的。這些零散的、錯誤的知識碎片增加了初學者的學習難度。



      對於 Webpack,我差不多也曾處於一樣的狀態。在 2016 年年底,我第一次接觸到 Webpack,當時公司項目用的建構工具還不是 Webpack,而技術論壇內已經漸漸開始流行使用 Webpack 建構前端工程了。當時沒有完整的 Webpack 資料,官方檔案也不容易了解。於是我找了一些文章,嘗試學習,不過沒有學明白。這是因為 Webpack 是基於 Node.js 的,而我當時不會 Node.js,於是我又開始學習 Node.js。



      幾年時間過去了,我對 Webpack 越來越熟悉。這中間走了很多彎路,舉例來說,為了掌握 Webpack 的正常設定而深入學習 Node.js,其實只需要會用幾個 Node.js 的模組函數就可以了,等等。



      我覺得前端工程領域需要一本對新人友善的 Webpack 與 Babel 圖書,於是我將自己的技術網誌文章整理成了本書。我在本書中對網誌文章中的 Webpack 部分進行版本升級,本書使用的是 Webpack 5 版本,針對 Babel 部分還增加了原理和外掛程式開發的內容。本書是一本全方位地給初學者講解 Webpack 和 Babel 的圖書,希望可以幫助讀者成為更優秀的 JavaScript 開發者。



      本書主要由 Webpack 和 Babel 兩大部分組成,Webpack 部分是第 1 章到第 8 章,Babel 部分是第 9 章到第 12 章。這兩部分內容相對獨立,讀者可以選擇自己感興趣的部分閱讀。



      本書中主要使用的 Webpack 版本是 v5.21.2,但對 v5.0.0 之後的版本都適用;主要使用的 Babel 版本是 v7.13.10,但對 v7.0.0 之後的版本都適用,而且還對 Babel 版本的變化列出了詳細的說明。建議讀者安裝與書中版本一致的工具軟體,這樣可以減少 npm 套件版本帶來的差異。



      本書使用的某些 npm 套件在未來可能因依賴升級而發生錯誤,這時可以透過將 x.y.z 版本編號中的 y 升級到最新版本來嘗試修正該錯誤。另外,因為 Webpack 生成 hash 值的演算法比較特殊,所以讀者在自己電腦上執行程式時生成的帶 hash 值的檔案名稱可能與書中不一樣。讀者在查看某些運行結果時,需要手動更改打包編譯後的檔案名稱。



      在閱讀本書時,如果遇到有問題或錯誤的地方,可以在本書的 GitHub 程式倉庫 github.com/jruit/webpack-babel 上透過 Issue 回饋給我。



      感謝關注我技術網誌(見連結16)的讀者們,你們的支持和讚譽給了我寫作本書的動力。



      感謝張東東和孟津,你們在我還是一個新人時就給予了我很多幫助,一直激勵著我深入前端開發的學習。



      最後,感謝付睿編輯,你在我寫作本書的過程中給予了我不少幫助,沒有你的耐心指導就沒有本書的出版。


    姜瑞濤




    其 他 著 作