首頁 搜尋 我的知識庫
JS絕對版本相容性:Webpack+Babel完美結合開發實戰

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

作者: 姜瑞濤
出版社: 深智數位
出版日期: 2022/07/20
ISBN-13: 9786267146262
書店 1






內容描述


零基礎前端開發新手也能輕鬆上手的前端 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 前瞻


作者介紹


作者簡介

姜瑞濤

  ◎畢業於華北電力大學
  ◎五年前端開發經驗
  ◎曾在好未來、用友擔任高級前端開發工程師
  ◎參與過用友 NC Cloud 大型企業數位化平臺和學而思網校 1 對 1 管理後臺的開發
  ◎擅長工程化解決前端相容性問題,在 Babel 的使用上有豐富經驗






相關書籍

職場急用!Excel視覺圖表速成:會這招最搶手,新創、外商與行銷都在用的資料視覺化技巧

Adobe Photoshop ACP國際認證應考攻略 (適用2019/2020/2021)

Rhinoceros 7 全攻略:自學設計與3D建模寶典

LLM 大型語言模型的絕世祕笈:27 路獨步劍法,帶你闖蕩生成式 AI 的五湖四海(iThome鐵人賽系列書)