項(xiàng)目背景 最近我們團(tuán)隊(duì)自研了一個(gè)基于 React 的 H5 前端框架，領(lǐng)導(dǎo)讓我來負(fù)責(zé)編寫框架的使用文檔。我選擇了 dumi 來搭建文檔站點(diǎn)，大部分內(nèi)容都是手動(dòng)寫 Markdo...
發(fā)簡信
IP屬地：上海
-
前端框架文檔新思路：基于源碼解析的自動(dòng)化方案 -
為React組件庫引入自動(dòng)化測試：從零到完善的實(shí)踐之路為什么我們需要測試？ 我們的 React+TypeScript 業(yè)務(wù)組件庫已經(jīng)穩(wěn)定運(yùn)行了一段時(shí)間，主要承載各類UI展示組件，如卡片、通知等。項(xiàng)目初期，迫于緊張的開發(fā)周期，我們...
-
使用Node.js打造交互式腳手架，簡化模板下載與項(xiàng)目創(chuàng)建在上一篇文章[http://www.itdecent.cn/p/8bf145cc38fc]中，我們探討了如何構(gòu)建一個(gè)通用的腳手架框架。在這篇文章中，我們將在此基礎(chǔ)上進(jìn)一步擴(kuò)...
-
構(gòu)建模塊化 CLI：Lerna + Commander 打造靈活的基礎(chǔ)腳手架在現(xiàn)代軟件開發(fā)中，創(chuàng)建 定制化的命令行工具(CLI) 已成為滿足公司業(yè)務(wù)需求的關(guān)鍵一環(huán)。這類工具可以輔助執(zhí)行諸如代碼檢查、項(xiàng)目初始化等任務(wù)。為了提高開發(fā)效率并簡化維護(hù)過程，我...
-
@Royal清風(fēng) 這個(gè)得看具體的報(bào)錯(cuò)內(nèi)容再分析
React+TypeScript 組件庫開發(fā)全攻略：集成Storybook可視化與Jest測試，一鍵發(fā)布至npm
平時(shí)我除了業(yè)務(wù)需求，偶爾會(huì)投入到UI組件的開發(fā)中，大多數(shù)時(shí)候只會(huì)負(fù)責(zé)自己業(yè)務(wù)場景相關(guān)或者一小部分公共組件，極少有從創(chuàng)建項(xiàng)目、集成可視化、測試到發(fā)布的整個(gè)過程的操作，這篇文章就...
-
@Royal清風(fēng) 那可以直接在組件編寫的時(shí)候就引入樣式，使用時(shí)就不用單獨(dú)引入了
React+TypeScript 組件庫開發(fā)全攻略：集成Storybook可視化與Jest測試，一鍵發(fā)布至npm
平時(shí)我除了業(yè)務(wù)需求，偶爾會(huì)投入到UI組件的開發(fā)中，大多數(shù)時(shí)候只會(huì)負(fù)責(zé)自己業(yè)務(wù)場景相關(guān)或者一小部分公共組件，極少有從創(chuàng)建項(xiàng)目、集成可視化、測試到發(fā)布的整個(gè)過程的操作，這篇文章就...
-
命令行應(yīng)用開發(fā)初學(xué)者指南：腳手架篇、UI 庫和交互工具在日常的前端開發(fā)工作中，我們經(jīng)常依賴各種命令行工具來提高效率和代碼質(zhì)量。例如，create-react-app 和 eslint 等工具不僅簡化了項(xiàng)目的初始化過程，還能自動(dòng)執(zhí)...
-
Node.js 構(gòu)建命令行工具：實(shí)現(xiàn) ls 命令的 -a 和 -l 選項(xiàng)在日常的前端開發(fā)中，我們常常借助各種基于 Node.js 的腳手架工具來加速項(xiàng)目搭建和維護(hù)，比如 create-react-app 可以一鍵初始化一個(gè) React 項(xiàng)目，es...
-
重構(gòu)案例：將純HTML/JS項(xiàng)目遷移到Webpack我們已經(jīng)了解了許多關(guān)于 Webpack 的知識(shí)，但要完全熟練掌握它并非易事。一個(gè)很好的學(xué)習(xí)方法是通過實(shí)際項(xiàng)目練習(xí)。當(dāng)我們對 Webpack 的配置有了足夠的理解后，就可以嘗試...
-
前端模塊化進(jìn)化史：從全局 function 到 ES Modules目前，前端開發(fā)已經(jīng)離不開由 CommonJS、ES Modules 和 Webpack 構(gòu)建的模塊化開發(fā)環(huán)境。無論是 JavaScript、CSS、圖片還是其他資源，都可以作...
-
全面掌握 Jest：從零開始的測試指南（下篇）在上一篇測試指南中，我們介紹了Jest 的背景、如何初始化項(xiàng)目、常用的匹配器語法以及鉤子函數(shù)的使用。這一篇篇將繼續(xù)深入探討 Jest 的高級(jí)特性，包括 Mock 函數(shù)、異步請...
-
全面掌握 Jest：從零開始的測試指南（上篇）隨著JavaScript在前后端開發(fā)中的廣泛應(yīng)用，測試已成為保證代碼質(zhì)量的關(guān)鍵環(huán)節(jié)。 為什么需要單元測試 在我們的開發(fā)過程中，經(jīng)常需要定義一些算法函數(shù)，例如將接口返回的數(shù)據(jù)轉(zhuǎn)...
-
從0到1：React項(xiàng)目中的Webpack配置實(shí)戰(zhàn)
公司項(xiàng)目一般都是使用集團(tuán)封裝好的腳手架，腳手架內(nèi)部實(shí)現(xiàn)咱看不到也摸不著，好不容易組內(nèi)推行新的UI框架，需要自行定義 webpack 配置，這可是個(gè)絕佳的好機(jī)會(huì)，我對配置過程進(jìn)...
-
React+TypeScript 組件庫開發(fā)全攻略：集成Storybook可視化與Jest測試，一鍵發(fā)布至npm平時(shí)我除了業(yè)務(wù)需求，偶爾會(huì)投入到UI組件的開發(fā)中，大多數(shù)時(shí)候只會(huì)負(fù)責(zé)自己業(yè)務(wù)場景相關(guān)或者一小部分公共組件，極少有從創(chuàng)建項(xiàng)目、集成可視化、測試到發(fā)布的整個(gè)過程的操作，這篇文章就...
-
輕松實(shí)現(xiàn)H5頁面下拉刷新：滑動(dòng)觸發(fā)、高度提示與數(shù)據(jù)刷新全攻略前段時(shí)間在做小程序到H5的遷移，其中小程序中下拉刷新的功能引起了產(chǎn)品的注意。他說到，哎，我們遷移后的H5頁面怎么沒有下拉刷新，于是乎，我就急忙將這部分的內(nèi)容給填上。 本來是計(jì)...
-
抽絲剝繭：詳述一次DevServer Proxy配置無效問題的細(xì)致排查過程事情的起因是這樣的，在一個(gè)已上線的項(xiàng)目中，其中一個(gè)包含登錄和獲取菜單的接口因響應(yīng)時(shí)間較長，后端讓我嘗試未經(jīng)服務(wù)轉(zhuǎn)發(fā)的另一域名下的新接口，舊接口允許跨域請求，但新接口不允許本地...
-
構(gòu)建動(dòng)態(tài)交互式H5導(dǎo)航欄：滑動(dòng)高亮、吸頂和錨點(diǎn)導(dǎo)航技巧詳解功能描述 產(chǎn)品要求在h5頁面實(shí)現(xiàn)集錨點(diǎn)、吸頂及滑動(dòng)高亮為一體的功能，如下圖展示的一樣。當(dāng)頁面滑動(dòng)時(shí)，內(nèi)容區(qū)域?qū)?yīng)的選項(xiàng)卡高亮。當(dāng)點(diǎn)擊選項(xiàng)卡時(shí)，內(nèi)容區(qū)域自動(dòng)滑動(dòng)到選項(xiàng)卡正下方。...
-
pnpm 管理依賴包是如何節(jié)省磁盤空間的？npm 存在的問題 我們經(jīng)常使用 npm 來管理 node 項(xiàng)目中的包，從 package.json 中讀取配置將依賴下載到本地，以保障項(xiàng)目的正常運(yùn)行。 當(dāng)項(xiàng)目數(shù)量多時(shí)，這樣...
-
antd/fusion表格增加圈選復(fù)制功能背景介紹 我們存在著大量在PC頁面通過表格看數(shù)據(jù)業(yè)務(wù)場景，表格又分為兩種，一種是 antd / fusion 這種基于 dom 元素的表格，另一種是通過 canvas 繪制的...
-
PC首頁資源加載速度由8s降到2s的優(yōu)化實(shí)踐隨著需求的不斷開發(fā)，前端項(xiàng)目不斷膨脹，業(yè)務(wù)提出：你們的首頁加載也太慢啦，我都需要7、8秒才能看到內(nèi)容，于是乎主管就讓我聯(lián)合后端開啟優(yōu)化專項(xiàng)，目標(biāo)是3s內(nèi)展示完全首頁的內(nèi)容。 ...