tag 前端工程化

標籤
貢獻32
92
07:55 AM · Nov 03 ,2025
sysu_xuejia 頭像 icecreamlj 頭像 jump_and_jump 頭像 hiisea 頭像 coderleo 頭像 ntksol 頭像 ailvyoudetiebanshao 頭像 dewujishu 頭像 vleedesigntheory 頭像 shuirongshui 頭像 segmentfault 頭像 ruizhengyun 頭像

@前端工程化 / 博客 RSS 訂閱

hiisea 頭像

hiisea - 微模塊-前端業務模塊化探索，拆解巨石應用的又一利器

大家好，我是Eluxjs的作者，Eluxjs是一套基於“微模塊”和“模型驅動”的跨平台、跨框架『同構方案』，歡迎瞭解... 文前聲明，以下推斷和結論純屬個人探索，鑑於本人知識水平所限，謬誤在所難免，懇請各位大佬不吝賜教... 什麼是前端“微模塊”？ Elux中的『微模塊』是指在Web前端工程中，將代碼和相關資源按照不同的業務功能進行歸類和模塊化。 根據業務功能進行模塊化一直以來都是後端的普遍做法，

react , vue.js , 前端工程化 , 前端架構 , 前端框架

收藏 評論

hiisea 頭像

hiisea - 前端架構-分層而治，鐵打的MV流水的C

為什麼在web前端很少有人會提到分層架構，例如經典MVC架構，這是因為瀏覽器誕生之初就只是作為一個後端數據的GUI渲染器。也就是説整體來看，web1.0時代的整個web前端工程就是一個View層，而Model和Controller就是指後端，所以根本無需在web前端工程中去提什麼MVC。 然而web生態發展到今天，瀏覽器越來越強大，賦能越來越多，甚至不亞於一個小型操作系統，這時候的Web前端早已不

react , vue.js , 前端工程化 , 前端架構 , 前端框架

收藏 評論

1023 頭像

亖混子 - 規範你的commit msg

TL;DR： 👉 commitizen 使用 👉 commitlint 使用 👉 可以直接抄走的配置 👉 git cz 的原理 可參考的代碼庫 規範 commit msg 的意義 規範化、格式化的 commit message 可以讓我們更好的追蹤需求的演進、回滾時能夠快速的找到提交、最次也能讓我們的倉庫顯的更專業。 團隊如何規範 commit msg呢，靠宣講、靠文檔？當然得靠工具生成

前端工程化 , 規範化 , commitizen , Javascript

收藏 評論

jasinyip 頭像

JasinYip - 前端工具鏈課（二）—— 模塊化工具及組件化思想

第二個問題，我想從這個最簡單的 HTML 頁面開始。 !DOCTYPE html html head titleTest/title /head body ... /body 當我們想寫一些樣式的時候，我們通常會引入一個外部的 CSS 文件，就像這樣： link rel="stylesheet" href="style.css" 有時我們可能會想用一個比如説 Bootstrap 這種的

前端工程化 , 前端工具 , 模塊化 , webpack , 前端

收藏 評論

segmentfault 頭像

SegmentFault思否 - SegmentFault 技術週刊 Vol.29 - 聽説前端又出新工具了？驚不驚喜？

在前端刀耕火種的年代，佈局用 table 標籤，CSS 樣式大量內聯；校驗 JS代碼是否規範，需要複製代碼到 jshint（相信很多 “前輩” 對此都不陌生）；壓縮合並代碼，也是通過壓縮工具壓縮完再複製到一個文件裏；修改了代碼要查看效果，必須手動刷新瀏覽器；代碼寫好了要發佈到服務器，需要用 FTP 軟件上傳，等等等等。 其實嚴格來説，那個時候還沒有前端開發這個職位，那個時候叫切圖仔或者頁面仔，隸

前端工程化 , 前端構建 , 前端工具 , segmentfault-技術週刊

收藏 評論

sysu_xuejia 頭像

陳學家_6174 - 精益 React 學習指南 （Lean React）- 2.2 webpack

書籍完整目錄 2.2 webpack 這一節中我們將系統的講解 webpack ，包括： webpack 介紹 webpack 是什麼 為什麼引入新的打包工具 webpack 核心思想 webpack 安裝 webpack 使用 命令行調用

react , 前端工程化 , leanreact , 前端

收藏 評論

helei112g 頭像

大愚Talk - php工程獅感知的前端工作流程

這個時代不懂點前端知識，真的沒有辦法生存。就算不會寫，也得了解它的原理吧！ 最近做了一些總結，之前都是迷迷糊糊，搞不清楚前端之前的相關定位。好好梳理了一下。錯誤之處請各位指正。 本文主要説的是 JavaScript 工作流程 目前前端真的該叫大前端，其越來越細化，越來越複雜。在這種背景下，誕生了很多工具很多前端工作流程。比如熱門的： react vue webp

react , vue.js , 前端工程化 , 前端工具 , Javascript

收藏 評論

kira_58a179b7c1581 頭像

kira - 前端開發團隊的工具鏈

彙集前端開發團隊中經常使用的好工具，分享給大家！ 注：都是開源工具 sentry：推薦指數5顆星⭐️⭐️⭐️⭐️⭐️ 推薦理由：開源的代碼異常監控和上報平台，搭建安裝簡單，操作和使用都簡單，支持很多種開發語言的監控上報，提供了快速上手demo，bug異常無需用户主動上報反饋即可知曉，還提供豐富的用户操作信息，提供日常bug郵件通知，週報統計，支持source map 源碼解析，跟蹤非常方便，快速

前端工程化 , 開發工具 , 前端工具 , 前端 , Javascript

收藏 評論

sysu_xuejia 頭像

陳學家_6174 - 精益 React 學習指南 （Lean React）- 2.5 webpack 進階

書籍完整目錄 2.5 webpack 進階 配置分離 code splitting 異步加載 理解 webpack chunk webpack 調試 2.5.1 配置分離 在大型項目中，可能 webpack.config.js 會變得越來越臃腫，這個時候可以利用做 webpack-merge 插件。將配置定義在一個目錄下面的不同文件中，然

react , 前端工程化 , webpack , leanreact , 前端

收藏 評論

_6085362b65292 頭像

HZFEStudio - 移動端自適應的常見手段

完整高頻題庫倉庫地址：https://github.com/hzfe/awesome-interview 完整高頻題庫閲讀地址：https://febook.hzfe.org/ 相關問題 介紹 meta 的 viewport 值 rem 和 vw 的值是根據什麼計算的 1px 顯示問題 如何適配劉海屏 回答關鍵點 viewport 相對單位 媒體查詢 響應式圖片 移動端開發的主要痛點是

移動端 , 前端工程化 , 面試 , 移動端適配 , 前端

收藏 評論

landejin 頭像

藍德錦 - 前端模塊化的身份證：package.json

什麼是package.json？ package.json是JavaScript項目的清單，該文件記錄了你的項目的名稱、版本、依賴等相關信息，同時它也是你將項目發佈到npm上的依據，可以説，package.json在前端模塊化時代，相當於項目的身份證，充分了解package.json的用户和含義是前端必備過程 初始化package.json 通過npm或者yarn指令可以快速創建package.j

node.js , 前端工程化 , package.json , npm , Javascript

收藏 評論

shuirongshui 頭像

水冗水孚 - 通俗易懂地談談，前端工程化之自定義腳手架的理解，並附上一個實踐案例發佈到npm上

前言 如果要開發一個新項目，傳統方式要敲不少命令 如下：使用最新版的vite，創建一個項目，選擇對應的框架語言等 然後就是安裝各種依賴，安裝antd、安裝路由、安裝zustand等，如npm install axios react-router-dom antd ...... 若每次新開一個常規項目，都執行這樣的搭建操作，整體來説，效率略低，不優雅——（畢竟是手動配置） 於是，在此

腳手架cli , 前端工程化 , cli , npm

收藏 評論

sysu_xuejia 頭像

陳學家_6174 - 精益 React 學習指南 （Lean React）- 2.4 webpack + gulp 構建完整前端工作流

書籍完整目錄 2.4 webpack + gulp 構建完整前端工作流 在前面的兩個小節中已經完整的講了 webpack 和 gulp 相關的內容，本小節中將會結合二者構建一個完整的前端工作流，內容目錄為： 前端工程結構和目標 前端工程目錄結構 gulp clean gulp copy gulp less gulp au

react , 前端工程化 , 前端架構 , leanreact

收藏 評論

ruizhengyun 頭像

前端早8點 - 前端初級新人，如何撕去菜鳥標籤

原文地址：https://github.com/ruizhengyu... 作為前端新人，我們常以菜鳥自居，主要是專業程度不高，還有就是自謙。其實，作為菜鳥的我們也想撕掉這類標籤，我們也努力，可還是學不好前端，是真的不適合做這行還是方法不對，沒人告訴我們？如果你覺得自己還處在菜鳥階段的迷茫區，那可以看看本篇文章，希望看完之後你能得到想要的。如果你要闡述你的想法，請在評論區留下你的文字。

前端工程化 , 前端性能 , 前端設計 , 前端

收藏 評論

febobo 頭像

刀哥 - 夢迴前端-數據類型篇

關於夢迴前端 每天一個重要的知識點，以問答的形式進行反推，利用碎片時間來完成自我提升 Day1 數據類型篇 説在前面 JS是典型的弱類型(動態)語言, 意味着你不用提前聲明變量的類型，在程序運行過程中，類型會被自動確定, 也意味着你可以使用同一個變量保存不同類型的數據 請簡述Js中有哪些數據類型? Js中每一個值都屬於某一種數據類型, 根據最新的語言標準，一共有8種類型 Boolean N

前端工程化 , 面試 , 前端優化 , 前端性能 , 前端

收藏 評論

daguaisou 頭像

Jerry - 【工程化】前端工程構建工具gulp篇

gulp ,基於 NodeJS 的項目，自動化構建的工具增強你的工作流程！ 一、工作原理 前端構建工具，gulp是基於Nodejs，自動化地完成 javascript、coffee、sass、less、html/image、css 等文件的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。 借鑑了Unix操作系統的管道（pipe）思想，前一級

gulp , 前端工程化 , 前端構建 , 前端

收藏 評論

amap_tech 頭像

高德技術 - 高德前端這五年：動態化技術的研發歷程和全面落地實踐

前言 2015年-2020年，歷經5年發展，高德地圖應用開發前端團隊在業務快速發展中不斷成長。一路走來，從小團隊主要負責短期運營活動開發的散兵遊勇，到現在團隊規模100人+，覆蓋高德5大業務線，上百個模塊的堅甲利兵。本文將分享隨着業務快速增長高德前端的技術發展歷程，總結動態化技術的落地實踐，以及高德前端未來的發展方向。 高德（應用開發）前端技術的發展按照時間線來看，大致可以分為 4 個階段：

高德地圖 , 前端工程化 , 前端構建 , 前端

收藏 評論

solvep 頭像

solvep - 前端代碼風格實踐 prettier + ESLint + Git Hook + lint-staged

整潔的代碼如同優美的散文。—— Grady Booch 前言： 在繁雜的業務迭代時，接手其他項目，如果沒有一個統一的代碼風格，閲讀起來是相當困難的，畢竟團隊裏的每個人習慣不一樣。團隊協作，意味着需要犧牲一些個性，減少一些沒必要的爭吵。 1.Prettier是什麼？ 顧名思義 prettier（更漂亮的），讓你的代碼更漂亮。官網説的很清楚了 An opinionated code format

前端工程化 , 前端優化 , 前端 , Git

收藏 評論

vleedesigntheory 頭像

維李設論 - 從2021看2022前端發展趨勢

本文參與了 SegmentFault 思否徵文「2021 總結」，歡迎正在閲讀的你也加入。 前言 又到了年底，回顧一下整個2021年的前端歷程，總體來説前端趨向到了一個比較穩定的發展階段，雖然仍然有許多層出不窮的庫及輪子，但整體來看其實今年最突出的前端發展其實可以概括為以下幾個關鍵詞，即：工程基建、低代碼、多語言、雲+邊+端。從不同大廠對整個前端的劃分視角來看，整體可以分為兩大類，一類是聚焦化，比

大前端 , 前端工程化 , 前端框架 , 前端構建 , 前端

收藏 評論

dewujishu 頭像

得物技術 - 卡口服務 —— 基於前端巡檢系統的拓展實踐｜得物技術

1 背景 體驗是得物的業務關鍵詞之一，對於前端開發而言，提高用户體驗更是重要工作內容之一。 得物前端平台目前有巡檢系統、監控平台等多種手段保障線上頁面穩定運行，但是仍有一部分問題處於“監控死角”，而且巡檢、監控都屬於後置告警手段，為了確保頁面上線前就能得到一定的用户體驗保障，結合公司的戰略目標，我們決定開發一個H5頁面檢測服務，用來前置檢測即將上線的頁面，提前暴露該頁面可能存在的問題反饋給對應的開

前端工程化 , 前端框架 , 前端工程師 , 前端性能 , 前端

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 為react項目添加開發/提交規範（eslint、prettier、husky、commitlint、stylelint）

因歷史遺留原因，接手的項目沒有代碼提醒/格式化，包括 eslint、pretttier，也沒有 commit 提交校驗，如 husky、commitlint、stylelint，與其期待自己或者同事的代碼寫得完美無缺，不如通過一些工具來進行規範和約束。 eslint eslint 是一個代碼校驗工具，用來規範項目代碼風格。 初始化 通過 npm install eslint 後使用 npx esl

husky , react , commitlint , 前端工程化 , prettier

收藏 評論

ntksol 頭像

歐雷 - 我來聊聊面向模板的前端開發

在軟件開發中，研發效率永遠是開發人員不斷追求的主題之一。於公司而言，在競爭激烈的互聯網行業中，產出得快和慢也許就決定着公司的生死存亡；於個人而言，效率高了就可以少加班，多出時間去提升自己、發展愛好、陪伴家人，工作、生活兩不誤。 提升效率的途徑，無外乎就是「方法」和「工具」。以一個開發者的思維來想，就是將工作內容進行總結、歸納，從一組相似的工作內容中提煉共同點，抽象出解決這一類問題的方法，從而造出便

複雜度 , 前端工程 , dsl , 前端工程化 , 軟件工程

收藏 評論