元氣少女冰

摘要： 項目背景 最近我們團隊自研了一個基于 React 的 H5 前端框架，領(lǐng)導(dǎo)讓我來負責編寫框架的使用文檔。我選擇了 dumi 來搭建文檔站點，大部分內(nèi)容都是手動寫 Markdown 來介紹各種功能，包括：初始化、目錄結(jié)構(gòu)、生命周期、狀態(tài)管理、插件系統(tǒng) 等等。 框架里有個很重要的子包，主要負責多個 Ap 閱讀全文

摘要： 需求背景 主管和其他同事基于公司的業(yè)務(wù)特點，開發(fā)了一套自研前端框架。技術(shù)選型是 React + JavaScript 的組合，上線后表現(xiàn)還不錯。現(xiàn)在他們想把這個組件庫推廣到其他團隊使用，所以讓我琢磨一下：怎么能讓使用者用得更順手一點？尤其是能不能在寫代碼的時候有自動提示？ 我調(diào)研了一下市面上常見的幾 閱讀全文

摘要： 為什么我們需要測試？ 我們的 React+TypeScript 業(yè)務(wù)組件庫已經(jīng)穩(wěn)定運行了一段時間，主要承載各類UI展示組件，如卡片、通知等。項目初期，迫于緊張的開發(fā)周期，我們暫時擱置了自動化測試的引入。當時團隊成員對組件邏輯了如指掌，即便沒有測試也能游刃有余。 然而隨著時間推移，問題逐漸顯現(xiàn)。當新成 閱讀全文

摘要： 在上一篇文章中，我們探討了如何構(gòu)建一個通用的腳手架框架。今天，我們將在此基礎(chǔ)上進一步擴展腳手架的功能，賦予它下載項目模板的能力。 通常情況下，我們可以將項目模板發(fā)布到 npm 上，或者在公司內(nèi)部利用私有 npm 倉庫進行托管。通過交互式命令行界面，開發(fā)者可以輕松選擇項目類型、項目名稱以及所需的項目模 閱讀全文

摘要： 在現(xiàn)代軟件開發(fā)中，創(chuàng)建 定制化的命令行工具(CLI) 已成為滿足公司業(yè)務(wù)需求的關(guān)鍵一環(huán)。這類工具可以輔助執(zhí)行諸如代碼檢查、項目初始化等任務(wù)。為了提高開發(fā)效率并簡化維護過程，我們將功能模塊化，并通過多個子包來組織這些功能。本文將介紹如何使用 Lerna 來管理一個多包項目，并基于 Commander 閱讀全文

摘要： 在日常的前端開發(fā)工作中，我們經(jīng)常依賴各種命令行工具來提高效率和代碼質(zhì)量。例如，create-react-app 和 eslint 等工具不僅簡化了項目的初始化過程，還能自動執(zhí)行代碼檢查和格式化任務(wù)。當我們使用這些工具時，它們通常會通過一系列互動式的問答來收集必要的信息，從而根據(jù)我們的選擇進行相應(yīng)的配 閱讀全文

摘要： 在日常的前端開發(fā)中，我們常常借助各種基于 Node.js 的腳手架工具來加速項目搭建和維護，比如 create-react-app 可以一鍵初始化一個 React 項目，eslint 則幫助我們保持代碼的整潔和一致。而在公司內(nèi)部，為了更好地滿足特定業(yè)務(wù)的需求，我們往往會構(gòu)建自己的腳手架工具，如自定義 閱讀全文

摘要： 我們已經(jīng)了解了許多關(guān)于 Webpack 的知識，但要完全熟練掌握它并非易事。一個很好的學(xué)習(xí)方法是通過實際項目練習(xí)。當我們對 Webpack 的配置有了足夠的理解后，就可以嘗試重構(gòu)一些項目。本次我選擇了一個純HTML/JS的PC項目進行重構(gòu)，項目位于 GitHub 上，非常感謝該項目的貢獻者。 重構(gòu)案 閱讀全文

摘要： 目前，前端開發(fā)已經(jīng)離不開由 CommonJS、ES Modules 和 Webpack 構(gòu)建的模塊化開發(fā)環(huán)境。無論是 JavaScript、CSS、圖片還是其他資源，都可以作為一個模塊來處理。那么，模塊化究竟是如何發(fā)展到今天的呢？ 全局函數(shù)模式 最初的前端模塊化嘗試是通過 全局函數(shù)來實現(xiàn)的。例如，在 閱讀全文

摘要： 在上一篇測試指南中，我們介紹了Jest 的背景、如何初始化項目、常用的匹配器語法以及鉤子函數(shù)的使用。這一篇篇將繼續(xù)深入探討 Jest 的高級特性，包括 Mock 函數(shù)、異步請求的處理、Mock 請求的模擬、類的模擬以及定時器的模擬、snapshot 的使用。通過這些技術(shù)，我們將能夠更高效地編寫和維護 閱讀全文