babel原理_带你了解 snowpack 原理，你还学得动么（下）
作者：AlienZHOU
轉發鏈接：https://zhuanlan.zhihu.com/p/149351900
目錄
帶你了解 snowpack 原理，你還學得動么(上)
帶你了解 snowpack 原理，你還學得動么(下)本篇
小編建議小伙們從第一篇開始，按照順序來看，更清晰明了。
這里我將 HMR 和樣式注入的代碼省去了，只保留了 CSS Module 功能的部分。可以看到，它其實是借力了 css-modules-loader-core 來實現的 CSS Module 中 token 生成這一核心能力。以創建的 React 模板為例，將 App.css 改為 App.module.css 使用后，代碼中會多出如下部分：
+?let?json?=?{"App":"_dist_App_module__App","App-logo":"_dist_App_module__App-logo","App-logo-spin":"_dist_App_module__App-logo-spin","App-header":"_dist_App_module__App-header","App-link":"_dist_App_module__App-link"};+?export?default?json;對于導出的默認對象，鍵為 CSS 源碼中的 classname，而值則是構建后實際的 classname。
3.6. 性能問題
還記得雅虎性能優化 35 條軍規么？其中就提到了通過合并文件來減少請求數。這既是因為 TCP 的慢啟動特點，也是因為瀏覽器的并發限制。而伴隨著前端富應用需求的增多，前端頁面再也不是手工引入幾個 script 腳本就可以了。同時，瀏覽器中 JS 原生的模塊化能力缺失也讓算是火上澆油，到后來再加上 npm 的加持，打包工具呼之欲出。webpack 也是那個時代走過來的產物。
隨著近年來 HTTP/2 的普及，5G 的發展落地，瀏覽器中 JS 模塊化的不斷發展，這個合并請求的“真理”也許值得我們再重新審視一下。去年 PHILIP WALTON 在博客上發的「Using Native JavaScript Modules in Production Today」就推薦大家可以在生產環境中嘗試使用瀏覽器原生的 JS 模塊功能。
「Using Native JavaScript Modules in Production Today」 這篇文章提到，根據之前的測試，非打包代碼的性能較打包代碼要差很多。但該實驗有偏差，同時隨著近期的優化，非打包的性能也有了很大提升。其中推薦的實踐方式和 snowpack 對 node_modules 的處理基本如出一轍。保證了加載不會超過 100 個模塊和 5 層的深度。
同時，由于業務技術形態的原因，我所在的業務線經歷了一次構建工具遷移，對于模塊的處理上也用了類似的策略：業務代碼模塊不合并，只打包 node_modules 中的模塊，都走 HTTP/2。但是沒有使用原生模塊功能，只是模塊的分布狀態與 snowpack 和該文中提到的類似。從上線后的性能數據來看，性能并未下降。當然，由于并非使用原生模塊功能來加載依賴，所以并不全完相同。但也算有些參考價值。
3.7. JSX / Typescript / Vue / Less …
對于非標準的 JavaScript 和 CSS 代碼，在 webpack 中我們一般會用 babel、less 等工具加上對應的 loader 來處理。最初版的 snowpack 并沒有對這些語法的處理能力，而是推薦將相關的功能外接到 snowpack 前，先把代碼轉換完，再交給 snowpack 構建。
而新版本下，snowpack 已經內置了 JSX 和 Typescript 文件的處理。對于 typescript，snowpack 其實用了 typescript 官方提供的 tsc 來編譯。
對于 JSX 則是通過 @snowpack/plugin-babel 進行編譯，其實際上只是對 @babel/core 的一層簡單包裝，機上 babel 相關配置即可完成 JSX 的編譯。
const?babel?=?require("@babel/core");module.exports?=?function?plugin(config,?options)?{??return?{????defaultBuildScript:?"build:js,jsx,ts,tsx",????async?build({?contents,?filePath,?fileContents?})?{??????const?result?=?await?babel.transformAsync(contents?||?fileContents,?{????????filename:?filePath,????????cwd:?process.cwd(),????????ast:?false,??????});??????return?{????????result:?result.code??????};????},??};};從上面可以看到，核心就是調用了 babel.transformAsync 方法。而使用 @snowpack/app-template-react-typescript 模板生成的項目，依賴了一個叫 @snowpack/app-scripts-react 的包，它里面就使用了 @snowpack/plugin-babel，且相關的 babel.config.json 如下：
{??"presets":?[["@babel/preset-react"],?"@babel/preset-typescript"],??"plugins":?["@babel/plugin-syntax-import-meta"]}對于 Vue 項目 snowpack 也提供了一個對應的插件 @snowpack/plugin-vue 來打通構建流程，如果去看下該插件，核心是使用的 @vue/compiler-sfc 來進行 vue 組件的編譯。
此外，對于 Sass(Less 也類似)，snowpack 則推薦使用者添加相應的 script 命令：
"scripts":?{??"run:sass":?"sass?src/css:public/css?--no-source-map",??"run:sass::watch":?"$1?--watch"}所以實際上對于 Sass 的編譯直接使用了 sass 命令，snowpack 只是按其約定語法對后面的指令進行執行。這有點類似 gulp / grunt，你在 scripts 中定義的是一個簡單的“工作流”。
綜合 ts、jsx、vue、sass 這些語法處理的方式可以發現，snowpack 在這塊自己實現的不多，主要依靠“橋接”已有的各種工具，用一種方式將其融入到自己的系統中。與此類似的，webpack 的 loader 也是這一思想，例如 babel-loader 就是 webpack 和 babel 的橋。說到底，還是指責邊界的問題。如果目標是成為前端開發的構建工具，你可以不去實現已有的這些子構建過程，但需要將其融入到自己的體系里。
也正是因為近年來前端構建工具的繁榮，讓 snowpack 可以找到各類借力的工具，輕量級地實現了構建流程。
4. 最后聊聊
snowpack 的一大特點是快 —— 全量構建快，增量構建也快。因為不需要打包，所以它不需要像 webpack 那樣構筑一個巨大的依賴圖譜，并根據依賴關系進行各種合并、拆分計算。snowpack 的增量構建基本就是改動一個文件就處理這個文件即可，模塊之間算是“松散”的耦合。
而 webpack 還有一大痛點就是“外部“依賴的處理，“外部”依賴是指：
- 模塊 A 運行時對 B 是有依賴關系
- 但是不希望在 A 構建階段把 B 也拿來一起構建
這時候 B 就像是“外部”依賴。在之前典型的一個解決方式就是 external，當然還可以通過使用前端加載器加載 UMD、AMD 包。或者更進一步，在 webpack 5 中使用 Module Federation 來實現。這一需求的可能場景就是微前端。各個前端微服務如果要統一一起構建，必然會隨著項目的膨脹構建越來越慢，所以獨立構建，動態加載運行的需求也就出現了。
對于打包器來說，import 'B.js' 默認其實就是需要將 B 模塊打包進來，所以我們才需要那么多“反向”的配置將這種默認行為禁止掉，同時提供一個預期的運行時方案。而如果站在原生 JavaScript Module 的工作方式上來說，import '/dist/B.js' 并不需要在構建的時候獲取 B 模塊，而只是在運行時才有耦合關系。其天生就是構建時非依賴，運行時依賴的。當然，目前 snowpack 在構建時如果缺少的依賴模塊仍然會拋出錯誤，但上面所說的本質上是可實現，難度較打包器會低很多，而且會更符合使用者的直覺。
那么 snowpack 是 bundleless 的么？我們可以從這幾個方面來看：
- 它對業務代碼的處理是 bundleless 的
- 目前對 node_modules 的處理是做了 bundle 的
- 它仍然提供了 @snowpack/plugin-webpack / @snowpack/plugin-parcel 這樣的插件才讓你能為生產環境做打包。所以，配合 module/nomodule 技術，它將會有更強的抵御兼容性問題的能力，這也算是一種漸進式營銷手段
snowpack 會成為下一代構建工具么？
In 2019, you should use a bundler because you want to, not because you need to.
本篇已完結
推薦JavaScript學習相關文章
《基于Canvas實現的高斯模糊(上)「JS篇」》
《基于Canvas實現的高斯模糊(下)「JS篇」》
《由淺入深，66條JavaScript面試知識點(一)》
《由淺入深，66條JavaScript面試知識點(二)》
《由淺入深，66條JavaScript面試知識點(三)》
《由淺入深，66條JavaScript面試知識點(四)》
《由淺入深，66條JavaScript面試知識點(五)》
《由淺入深，66條JavaScript面試知識點(六)》
《由淺入深，66條JavaScript面試知識點(七)》
《為什么 setTimeout 有最小時延 4ms ?》
《如何處理 Node.js 中出現的未捕獲異常？》
《Angular v10.0.0 正式發布，不再支持 IE9/10》
《基于 Docker 的 SSR 持續開發集成環境實踐》
《細聊圖解webpack 指南手冊》
《一文帶你徹底搞懂 NPM 知識點「進階篇」》
《細聊webpack性能優化面面觀》
《JS實現各種日期操作方法匯總》
《「實踐」細聊前端性能優化總結》
《「實踐」瀏覽器中的畫中畫(Picture-in-Picture)模式及其 API》
《「多圖」一文帶你徹底搞懂 Web Workers (上)》
《「多圖」一文帶你徹底搞懂 Web Workers (中)》
《深入細聊前端下載總結「干貨」》
《細品西瓜播放器功能分析(上)「實踐」》
《細品西瓜播放器功能分析(下)「實踐」》
《細聊50道JavaScript基礎面試題「附答案」》
《webpack4主流程源碼解說以及動手實現一個簡單的webpack(上)》
《webpack4主流程源碼解說以及動手實現一個簡單的webpack(下)》
《細聊前端架構師的視野》
《細聊應用場景再談防抖和節流「進階篇」》
《前端埋點統一接入方案實踐》
《細聊微內核架構在前端的應用「干貨」》
《一種高性能的Tree組件實現方案「干貨」》
《進擊的JAMStack》
《前后端全部用 JS 開發是什么體驗(Hybrid + Egg.js經驗分享)上》
《前后端全部用 JS 開發是什么體驗(Hybrid + Egg.js經驗分享)中》
《前后端全部用 JS 開發是什么體驗(Hybrid + Egg.js經驗分享)下》
《一文帶你搞懂 babel-plugin-import 插件(上)「源碼解析」》
《一文帶你搞懂 babel-plugin-import 插件(下)「源碼解析」》
《JavaScript常用API合集匯總「值得收藏」》
《推薦10個常用的圖片處理小幫手(上)「值得收藏」》
《推薦10個常用的圖片處理小幫手(下)「值得收藏」》
《JavaScript 中ES6代理的實際用例》
《12 個實用的前端開發技巧總結》
《一文帶你搞懂搭建企業級的 npm 私有倉庫》
《教你如何使用內聯框架元素 IFrames 的沙箱屬性提高安全性？》
《細說前端開發UI公共組件的新認識「實踐」》
《細說DOM API中append和appendChild的三個不同點》
《細品淘系大佬講前端新人如何上王者「干貨」》
《一文帶你徹底解決背景跟隨彈窗滾動問題「干貨」》
《推薦常用的5款代碼比較工具「值得收藏」》
《Node.js實現將文字與圖片合成技巧》
《愛奇藝云剪輯Web端的技術實現》
《我再也不敢說我會寫前端 Button組件「實踐」》
《NodeX Component - 滴滴集團 Node.js 生態組件體系「實踐」》
《Node Buffers 完整指南》
《推薦18個webpack精美插件「干貨」》
《前端開發需要了解常用7種JavaScript設計模式》
《淺談瀏覽器架構、單線程js、事件循環、消息隊列、宏任務和微任務》
《了不起的 Webpack HMR 學習指南(上)「含源碼講解」》
《了不起的 Webpack HMR 學習指南(下)「含源碼講解」》
《10個打開了我新世界大門的 WebAPI(上)「實踐」》
《10個打開了我新世界大門的 WebAPI(中)「實踐」》
《10個打開了我新世界大門的 WebAPI(下)「實踐」》
《「圖文」ESLint 在中大型團隊的應用實踐》
《Deno是代碼的瀏覽器，你認同嗎？》
《前端存儲除了 localStorage 還有啥？》
《Javascript 多線程編程?的前世今生》
《微前端方案 qiankun(實踐及總結)》
《「圖文」V8 垃圾回收原來這么簡單？》
《Webpack 5模塊聯邦引發微前端的革命？》
《基于 Web 端的人臉識別身份驗證「實踐」》
《「前端進階」高性能渲染十萬條數據(時間分片)》
《「前端進階」高性能渲染十萬條數據(虛擬列表)》
《圖解 Promise 實現原理(一)：基礎實現》
《圖解 Promise 實現原理(二)：Promise 鏈式調用》
《圖解 Promise 實現原理(三)：Promise 原型方法實現》
《圖解 Promise 實現原理(四)：Promise 靜態方法實現》
《實踐教你從零構建前端 Lint 工作流「干貨」》
《高性能多級多選級聯組件開發「JS篇」》
《深入淺出講解Node.js CLI 工具最佳實戰》
《延遲加載圖像以提高Web網站性能的五種方法「實踐」》
《比較 JavaScript 對象的四種方式「實踐」》
《使用Service Worker讓你的 Web 應用如虎添翼(上)「干貨」》
《使用Service Worker讓你的 Web 應用如虎添翼(中)「干貨」》
《使用Service Worker讓你的 Web 應用如虎添翼(下)「干貨」》
《前端如何一次性處理10萬條數據「進階篇」》
《推薦三款正則可視化工具「JS篇」》
《如何讓用戶選擇是否離開當前頁面？「JS篇」》
《JavaScript開發人員更喜歡Deno的五大原因》
《僅用18行JavaScript實現一個倒數計時器》
《圖文細說JavaScript 的運行機制》
《一個輕量級 JavaScript 全文搜索庫，輕松實現站內離線搜索》
《推薦Web程序員常用的15個源代碼編輯器》
《10個實用的JS技巧「值得收藏」》
《細品269個JavaScript小函數，讓你少加班熬夜(一)「值得收藏」》
《細品269個JavaScript小函數，讓你少加班熬夜(二)「值得收藏」》
《細品269個JavaScript小函數，讓你少加班熬夜(三)「值得收藏」》
《細品269個JavaScript小函數，讓你少加班熬夜(四)「值得收藏」》
《細品269個JavaScript小函數，讓你少加班熬夜(五)「值得收藏」》
《細品269個JavaScript小函數，讓你少加班熬夜(六)「值得收藏」》
《深入JavaScript教你內存泄漏如何防范》
《手把手教你7個有趣的JavaScript 項目-上「附源碼」》
《手把手教你7個有趣的JavaScript 項目-下「附源碼」》
《JavaScript 使用 mediaDevices API 訪問攝像頭自拍》
《手把手教你前端代碼如何做錯誤上報「JS篇」》
《一文讓你徹底搞懂移動前端和Web 前端區別在哪里》
《63個JavaScript 正則大禮包「值得收藏」》
《提高你的 JavaScript 技能10 個問答題》
《JavaScript圖表庫的5個首選》
《一文徹底搞懂JavaScript 中Object.freeze與Object.seal的用法》
《可視化的 JS：動態圖演示 - 事件循環 Event Loop的過程》
《教你如何用動態規劃和貪心算法實現前端瀑布流布局「實踐」》
《可視化的 js：動態圖演示 Promises & Async/Await 的過程》
《原生JS封裝拖動驗證滑塊你會嗎？「實踐」》
《如何實現高性能的在線 PDF 預覽》
《細說使用字體庫加密數據-仿58同城》
《Node.js要完了嗎？》
《Pug 3.0.0正式發布，不再支持 Node.js 6/8》
《純JS手寫輪播圖(代碼邏輯清晰，通俗易懂)》
《JavaScript 20 年 中文版之創立標準》
《值得收藏的前端常用60余種工具方法「JS篇」》
《箭頭函數和常規函數之間的 5 個區別》
《通過發布/訂閱的設計模式搞懂 Node.js 核心模塊 Events》
《「前端篇」不再為正則煩惱》
《「速圍」Node.js V14.3.0 發布支持頂級 Await 和 REPL 增強功能》
《深入細品瀏覽器原理「流程圖」》
《JavaScript 已進入第三個時代，未來將何去何從？》
《前端上傳前預覽文件 image、text、json、video、audio「實踐」》
《深入細品 EventLoop 和瀏覽器渲染、幀動畫、空閑回調的關系》
《推薦13個有用的JavaScript數組技巧「值得收藏」》
《前端必備基礎知識：window.location 詳解》
《不要再依賴CommonJS了》
《犀牛書作者：最該忘記的JavaScript特性》
《36個工作中常用的JavaScript函數片段「值得收藏」》
《Node + H5 實現大文件分片上傳、斷點續傳》
《一文了解文件上傳全過程(1.8w字深度解析)「前端進階必備」》
《【實踐總結】關于小程序掙脫枷鎖實現批量上傳》
《手把手教你前端的各種文件上傳攻略和大文件斷點續傳》
《字節跳動面試官：請你實現一個大文件上傳和斷點續傳》
《談談前端關于文件上傳下載那些事【實踐】》
《手把手教你如何編寫一個前端圖片壓縮、方向糾正、預覽、上傳插件》
《最全的 JavaScript 模塊化方案和工具》
《「前端進階」JS中的內存管理》
《JavaScript正則深入以及10個非常有意思的正則實戰》
《前端面試者經常忽視的一道JavaScript 面試題》
《一行JS代碼實現一個簡單的模板字符串替換「實踐」》
《JS代碼是如何被壓縮的「前端高級進階」》
《前端開發規范：命名規范、html規范、css規范、js規范》
《【規范篇】前端團隊代碼規范最佳實踐》
《100個原生JavaScript代碼片段知識點詳細匯總【實踐】》
《關于前端174道 JavaScript知識點匯總(一)》
《關于前端174道 JavaScript知識點匯總(二)》
《關于前端174道 JavaScript知識點匯總(三)》
《幾個非常有意思的javascript知識點總結【實踐】》
《都2020年了，你還不會JavaScript 裝飾器？》
《JavaScript實現圖片合成下載》
《70個JavaScript知識點詳細總結(上)【實踐】》
《70個JavaScript知識點詳細總結(下)【實踐】》
《開源了一個 JavaScript 版敏感詞過濾庫》
《送你 43 道 JavaScript 面試題》
《3個很棒的小眾JavaScript庫，你值得擁有》
《手把手教你深入鞏固JavaScript知識體系【思維導圖】》
《推薦7個很棒的JavaScript產品步驟引導庫》
《Echa哥教你徹底弄懂 JavaScript 執行機制》
《一個合格的中級前端工程師需要掌握的 28 個 JavaScript 技巧》
《深入解析高頻項目中運用到的知識點匯總【JS篇】》
《JavaScript 工具函數大全【新】》
《從JavaScript中看設計模式(總結)》
《身份證號碼的正則表達式及驗證詳解(JavaScript，Regex)》
《瀏覽器中實現JavaScript計時器的4種創新方式》
《Three.js 動效方案》
《手把手教你常用的59個JS類方法》
《127個常用的JS代碼片段，每段代碼花30秒就能看懂-【上】》
《深入淺出講解 js 深拷貝 vs 淺拷貝》
《手把手教你JS開發H5游戲【消滅星星】》
《深入淺出講解JS中this/apply/call/bind巧妙用法【實踐】》
《手把手教你全方位解讀JS中this真正含義【實踐】》
《書到用時方恨少，一大波JS開發工具函數來了》
《干貨滿滿!如何優雅簡潔地實現時鐘翻牌器(支持JS/Vue/React)》
《手把手教你JS 異步編程六種方案【實踐】》
《讓你減少加班的15條高效JS技巧知識點匯總【實踐】》
《手把手教你JS開發H5游戲【黃金礦工】》
《手把手教你JS實現監控瀏覽器上下左右滾動》
《JS 經典實例知識點整理匯總【實踐】》
《2.6萬字JS干貨分享，帶你領略前端魅力【基礎篇】》
《2.6萬字JS干貨分享，帶你領略前端魅力【實踐篇】》
《簡單幾步讓你的 JS 寫得更漂亮》
《恭喜你獲得治療JS this的詳細藥方》
《談談前端關于文件上傳下載那些事【實踐】》
《面試中教你繞過關于 JavaScript 作用域的 5 個坑》
《Jquery插件(常用的插件庫)》
《【JS】如何防止重復發送ajax請求》
《JavaScript+Canvas實現自定義畫板》
《Continuation 在 JS 中的應用「前端篇」》
作者：AlienZHOU
轉發鏈接：https://zhuanlan.zhihu.com/p/149351900
總結
以上是生活随笔為你收集整理的babel原理_带你了解 snowpack 原理，你还学得动么（下）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 云桌面 瘦终端_小米盒子连接Citrix
- 下一篇： excelexportentity中设置