Contributes13
Followers0
前言 相信小夥伴們都接觸過npm/yarn，這兩種包管理工具想必是大家工作中用的最多的包管理工具，npm作為node官方的包管理工具，它是隨着node的誕生一起出現在大家的視野中，而yarn的出現則是為了解決npm帶來的諸多問題，雖然yarn提高了依賴包的安裝速度與使用體驗，但它依舊沒有解決npm的依賴重複安裝等致命問題。pnpm的出現完美解決了依賴包重複安裝的問題，並且實現了yarn帶來的所有優
Nickname 南玖
前言 作為前端開發者，相信大家或多或少都接觸過webpack，現如今webpack已經滲透在了前端的各個方面，所以我們有必要來了解並學習webpack，webpack 是一種用於構建 JavaScript 應用程序的靜態模塊打包器，它能夠以一種相對一致且開放的處理方式，加載應用中的所有資源文件（圖片、CSS、視頻、字體文件等），並將其合併打包成瀏覽器兼容的 Web 資源文件。webpack相比其它
Nickname 南玖
前言 本篇文章將介紹一些webpack的進階用法，演示內容繼承自上一篇文章的內容，所以沒看過上一篇文章的建議先學習上一篇內容再閲讀此篇內容，會更有利於此篇的學習～ 文件指紋 文件指紋指的是打包輸出的文件名後綴，一般用來做版本管理、緩存等 webpack的指紋策略有三種：hash、chunkhash、contenthash，它們之間最主要的區別就是每種hash影響的範圍不同。 佔位符 webpac
Nickname 南玖
隨着技術的不斷髮展，持續交付已經成為了軟件開發領域的核心理念。為了幫助企業和開發團隊提高研發效能，實現從業務需求到產品上線的全流程管理，我們推出了開源項目管理軟件-TeamVision。本文將詳細介紹TeamVision平台的核心功能，並結合持續交付理念，展示如何藉助TeamVision實現研發效能的全面提升。 一、業務需求協作 在持續交付的理念下，需求管理是至關重要的一環。TeamVisio
Nickname 陸思遠_ོ
Docker概念 Docker是一個開源的應用容器引擎，它是基於Go語言並遵從Apache2.0協議開源。Docker可以讓開發者打包他們的應用以及依賴包到一個輕量級、可移植的容器中，然後發佈到任何流行的linux機器上，也可以實現虛擬化。通過容器可以實現方便快速並且與平台解耦的自動化部署方式，無論你部署時的環境如何，容器中的應用程序都會運行在同一種環境下。並且它是完全使用沙箱機制，相互之間是隔離
Nickname 南玖
node 項目從 process.env 讀取環境變量時，process.env 有哪些來源？ 命令行 使用 cross-env 處理跨平台環境變量設置。 { "scripts": { "dev": "cross-env MY_ENV=hello node ./index.js", "start": "cross-env MY_ENV=hello webpack" } }
Nickname hea1066
這是一個很少被提及的話題 —— 依賴管理(Dependencies Management) 。 在開源文化盛行的現代，多數時候我們都不必從零開始搭建一套軟件系統，轉而可以藉助諸多開放的代碼片段及其他資源更快速高效開發軟件應用，這算的上軟件工程發展史上一次巨大革命，因為它能大幅提升軟件工業的生產效率，我們不必再從底層開始編寫所有代碼，大部分問題與常見的編程模式都能在社區找到相應的解決方案，且這些被反
Nickname 範文傑
前言 作為前端人員肯定經常遇到這樣的場景：需求剛上線，產品拿着手機來找你，為什麼頁面打開這麼慢呀，心想自己開發的時候也有注意性能問題呀，不可能會這麼誇張。那沒辦法只能排查下是哪一塊影響了頁面的整體性能，打開瀏覽器控制枱一看，頁面上的這些配圖每張都非常大，心想這些配圖都這麼大，頁面怎麼快，那麼我們有沒有辦法監測頁面上的這些靜態資源大小，從而避免這種情況的發生。 Performance Perform
Nickname 南玖
前言 隨着Vue3的逐漸普及以及Vite的逐漸成熟，我們有必要來了解一下關於vite的本地構建原理。 對於webpack打包的核心流程是通過分析JS文件中引用關係，通過遞歸得到整個項目的依賴關係，並且對於非JS類型的資源，通過調用對應的loader將其打包編譯生成JS 代碼，最後再啓動開發服務器。 瞭解到webpack的耗時主要花費在打包上，Vite選擇跳過打包，直接以以 原生 ESM 方式提供源
Nickname 南玖
前端項目如何規範文件命名 ls-lint 是一個非常快的文件和目錄名稱 linter，可方便約束項目目錄和文件的命名。 特點： 快速 依賴少 適用所有文件 配置簡單 安裝依賴 npm install @ls-lint/ls-lint -D 在 husky 加入 git hook: "husky": { "hooks": { "pre-commit": "ls-lint
Nickname JackZhouMine
前言 接上篇文章，我們瞭解到vite的本地構建原理主要是：啓動一個 connect 服務器攔截由瀏覽器請求 ESM的請求。通過請求的路徑找到目錄下對應的文件做一下編譯最終以 ESM的格式返回給瀏覽器。 基於這個核心思想，我們可以嘗試來動手實現一下。 搭建靜態服務器 基於koa搭建一個項目： 項目結構如上，服務使用koa搭建，bin指定cli可執行文件的位置 #!/usr/bin/env node
Nickname 南玖
1. 關於這個系列 我認為，工程化是前端各類細分技術領域中最為基礎而關鍵，最具有知識廣度與深度因而學習曲線較為陡峭，但同時也是對整體開發效率、質量增益最大因而對個體而言最具有學習價值的高階技能之一。 具體來説，工程化領域向上可以探索學習各種構建工具、靜態代碼分析工具、CI/CD 與開發工作流等具象工具；橫向可認真研判、梳理、落地各類研發規則，提前幫助業務開發者做出技術選擇，以實現更高效而規範地業務
Nickname 範文傑
在工作中，我接觸到的產品均採用了微服務架構，後端項目開發普遍採用了六邊形架構：六邊形架構提供了一套良好的設計思想，但它缺乏對項目代碼組織細節的指導；同時，項目中並沒有使用專門的微服務框架，而是普遍使用Gin框架，這使得代碼組織過於靈活，沒有提供充分的編碼約束，以致於在過去的業務需求實現中，後端服務的項目代碼組織充斥着各種各樣的問題；為了解決這些問題、提高開發效率、保障工程質量，基於工作一年的實踐和
Nickname BioCrossCoder
頁面為了能在各個品牌、各個版本的瀏覽器上正常顯示，需要處理各種兼容問題：將現代的 JavaScript 語法（ESNext）轉譯為舊版的 JavaScript 語法（ES5）；為不兼容的 CSS 樣式添加瀏覽器前綴（-webkit-、-moz-）；等等。 現代的前端頁面開發流程，都有相應的工具為開發者自動地處理這些兼容問題：Autoprefixer - 為 CSS 樣式，自動添加不兼容的瀏覽器前綴
Nickname Steven
這是前端工程化的系列文章 版本號組成 node package 版本號由四部分組成：major.minor.patch[-prerelease]，比如：1.0.2-beta.1，其中 prerelease 可選。 major：代表主版本號，通常在需要提交不能向下兼容的情況下對該版本號進行升級 minor：代表次版本號，通常在新增功能時才對該版本號進行升級 patch：代表修復版本號，升級該
Nickname specialcoder
包管理工具的發展 2010 年 1 月，一款名為 npm 的包管理器誕生。它確立了包管理器工作的核心原則。 npm 的發佈誕生了一場革命，在此之前，項目依賴項都是手動下載和管理的。npm 引入了文件和元數據字段，將依賴項列表存儲在 package.json 文件中，並且將下載的文件保存到 node_modules 文件夾中。 後來因為 npm 的缺陷或者舊版本的不足，又出現了一個個替代
Nickname specialcoder
前言 前面我們有提到Vite在開發階段，提倡的是一個no-bundle的理念，不必與webpack那樣需要先將整個項目進行打包構建。但是no-bundle的理念只適合源代碼部分（我們自己寫的代碼），vite會將項目中的所有模塊分為依賴與源碼兩部分。 依賴： 指的是一些不會變動的一些模塊，如：node_modules中的第三方依賴，這部分代碼vite會在啓動本地服務之前使用esbuild進行預構建。
Nickname 南玖
前言 本文中所採取的方案主要是css預處理（less/scss）方案，適用於項目中有多套主題需要進行配置，有着很強的擴展性和易用性，如果你的項目臨時需要加上主題切換，可以採用；如果你的項目需要很多套主題配置，也非常適用！ 一、變量配置的代碼部分 1、主題變量的配置 theme.scss（在項目中存放在style文件夾下面，這個文件夾主要用於系統一些公共樣式的存放和管理） // 主題配置 $the
Nickname 1227
參考：https://github.com/SunshowerC/blog/issues/8 browser VS module VS main 我們經常見到 package.json 裏有這樣一段內容： { ... main: dist/index module: dist/index.esm.js browser: dist/zhihu-hybrid.umd.js } 當我們在不
Nickname specialcoder
參考： https://zhuanlan.zhihu.com/p/337796076 JavaScript 模塊化機制概覽 JavaScript 常見的模塊化機制主要有以下三種： AMD (Asynchronous Module Definition): 在瀏覽器中使用，並用 define 函數定義模塊； CJS (CommonJS): 在 NodeJS 中使用，用 require 和 mo
Nickname specialcoder
歡迎來到本系列文章，這些內容都是從我的開源項目 C-Shopping 衍生而來的。在這個系列中，我們將深入探討 Next.js 和其他技術的各個方面，分享我在開發 C-Shopping 時積累的見解和最佳實踐。如果你發現這些文章有幫助，請考慮在 GitHub 上為項目點亮一顆星星。你的支持對我來説意義重大，也會激勵我進行更多的開發！ 項目在線演示地址： docker 部署地址：http://s
Nickname 繼小鵬
構建其實是工程化、自動化思想在前端開發中的體現，把一系列流程用代碼去實現，讓代碼自動化地執行這一系列複雜的流程。 構建給前端開發注入了更大的活力，解放了我們的生產力。 Webpack 憑藉強大的功能與良好的使用體驗，已經成為目前最流行，社區最活躍的構建工具，是現代 Web 開發必須掌握的技能之一。 背景 在當下的前端環境裏，各種框架和工具層出不窮，比如 React、Vue、Angular 等，極大
Nickname 編程三昧
前言 感覺這塊也是一個知識點，雖然我現在還不能系統的用xmind總結每個知識點的串聯關係，但是隻能看一個記一個了 package.json是什麼 我個人理解，package.json是描述包，管理包的一個信息json文件，給npm用的，比如你可以寫一個包，發到npm，那這個json就是記錄這個包的信息，或者對用vue腳手架開發的項目而言，它就是管理包的文件，npm install會讀這個文件的de
Nickname bug之所措
在 Gulp 的官方文檔中，Gulp 的任務都是寫在 gulpfile.js 這一個文件中的，如果任務數量不多，這並不會有什麼問題，但當任務數量較多時，會造成代碼可讀性差，難以維護，多人協作時還會容易造成衝突。因此，更好的處理方式是把 Gulp 的代碼結構化。 開始結構化 https://github.com/QMUI/qmui_web 這是一個前端框架，主要由一個 SASS 方法合集與內置的工作
Nickname kayo5994