博客 RSS 訂閱

pinmingxueqianduandelaji 頭像

bug之所措 - package.json的認識

前言 感覺這塊也是一個知識點，雖然我現在還不能系統的用xmind總結每個知識點的串聯關係，但是隻能看一個記一個了 package.json是什麼 我個人理解，package.json是描述包，管理包的一個信息json文件，給npm用的，比如你可以寫一個包，發到npm，那這個json就是記錄這個包的信息，或者對用vue腳手架開發的項目而言，它就是管理包的文件，npm install會讀這個文件的de

gulp , vue.js , 工程化 , npm , 前端

收藏 評論

kayo5994 頭像

kayo5994 - Gulp 結構化最佳實踐

在 Gulp 的官方文檔中，Gulp 的任務都是寫在 gulpfile.js 這一個文件中的，如果任務數量不多，這並不會有什麼問題，但當任務數量較多時，會造成代碼可讀性差，難以維護，多人協作時還會容易造成衝突。因此，更好的處理方式是把 Gulp 的代碼結構化。 開始結構化 https://github.com/QMUI/qmui_web 這是一個前端框架，主要由一個 SASS 方法合集與內置的工作

gulp , 工程化 , 工作流

收藏 評論

heiyanjing 頭像

HeiYanjing - Gulp基本概念及應用

gulp簡介,基本使用 Gulp.js 是一個自動化構建工具,開發者可以使用它在項目開發過程中自動執行常見任務。 yarn add gulp 安裝gulp的時候會安裝gulp-cli。gulpfile.js中導出一個函數,最新的gulp中取消了同步代碼模式，每一個任務都是異步任務，最後需要調用回調函數或其他方式標記任務完成。如例子中如果沒有done，會報錯.如果任務名是default，運行時的命

gulp , 前端

收藏 評論

heiyanjing 頭像

HeiYanjing - 一個gulp構建工作流案例

一個構gulp自動化構建工作流案例 需要對樣式文件，js文件，html文件，圖片字體文件，其他額外文件依次構建任務，並在此過程中實現對文件的壓縮合並 const { src, dest, series, parallel, watch, } = require('gulp'); const loadPlugins = require('gulp-lo

gulp , 構建工具

收藏 評論

chencaize 頭像

點墨 - 使用gulp上傳打包文件到服務器

項目是使用create-app-rewired生成的react項目，使用gulp自動上傳打包文件到服務器，建議只在測試環境和模擬環境使用。 1.安裝gulp,gulp-ssh包 2.編寫腳本 3.修改config-overrides.js，將打包文件分環境生成 4.編寫gulp配置文件gulpfile.js const { src, task, series } = r

gulp , 部署 , 打包 , 前端 , Web

收藏 評論

hello888 頭像

洛陽醉長安行 - 【從實戰帶你認識gulp】打包前端項目並實現防緩存

gulp是什麼？ 一個基於node的前端自動化任務構建工具，使用經典回調+鏈式調用的方式實現任務的自動化 (src.pipe(...).pipe)，gulp其實和webpack很相似，但是gulp側重點不同，gulp更側重前端流程自動化、任務執行（通過任務使開發提效），就像一條流水線。而webpack則是更側重用於打包前端資源，一切皆可打包成模塊。 官方文檔：https://www.gulp

gulp , 前端 , Javascript

收藏 評論

morimanong 頭像

末日碼農 - 用 rollup + gulp 造個輪子，別説還挺香

前戲 我是16年入了前端的坑，17年知道了gulp和rollup這兩個玩意兒。由於那時webpack勢頭很猛，便一直沒有正眼瞧過它一眼。 直到20年進了一家小公司，做了很多類似的小項目，相同的代碼拷來拷去，出現一個bug一堆項目都要改，實在噁心到我了。 於是不得不開始考慮將一些公共的方法和組件提取出來，做成一個第三方庫來維護。而在庫的封裝方面，rollup相對於webpack具有一定的優勢。 在此

gulp , rollup , typescript , 前端 , Javascript

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - gulp使用指南

gulp 是一個使用“流”來實現自動化的工具，正如 官方文檔 首頁展示的這副動圖一樣，以“流動”的狀態去處理 TypeScript、PNG、Markdown 資源。 與webpack比較 類別 webpack gulp 核心理念 module bundler task runner 執行任務 模塊化

gulp , webpack , 前端 , Javascript

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - gulp來處理html、css、js資源啦

gulp 一般用於處理自動化任務，默認情況無法處理模塊化，也不會用於大型項目，但它可以使用各種插件來編譯 html、css、js 等資源。 不清楚如何使用 gulp 開啓任務的朋友可以參考 gulp使用指南 處理html 處理 html 資源使用到 gulp-htmlmin 這個插件，和 webpack中使用到的html-webpack-plugin 比較相似。 // gulpfile.js co

gulp , gulp-babel , webpack , 前端 , Javascript

收藏 評論

luchanan 頭像

芝士份子 - gulp-imagemin版本9圖片壓縮

由於網上大多數的博文已經比較久，參考性不大 版本 gulp PS D:\XXX\github\hexo gulp -v CLI version: 2.3.0 Local version: 4.0.2 gulp-imagemin 9.0.0 node PS D:\XXX\github\hexo node -v v20.10.0 PS D:\XXX\git

gulp

收藏 評論

gqkmiss 頭像

月恆 - 使用 CRXJS 構建 Chrome 插件在 Chrome 瀏覽器升級到 130xxx 版本之後，出現CSP錯誤

使用 CRXJS 構建 Chrome 插件在 Chrome 瀏覽器升級到 130xxx 版本之後，出現 Content Security Policy 錯誤 一、前言 之前有個老哥找我寫了插件，到現在幾個月過去了，今天早上和我説 Chrome 瀏覽器報錯運行不起來了，但是 edge 瀏覽器沒問題。 就幫忙定位了下問題，發現是 Content Security Policy 的問題導致的報錯； 老

gulp , chrome , chrome-extension , 前端

收藏 評論

putao0525 頭像

putao - react native 項目創建

創建項目 npx @react-native-community/cli init 項目名稱 依賴組件 brew update brew upgrade openssl readline libyaml gmp 新版本的macos git clone https://github.com/rbenv/ruby-build.git "$(rbenv root)"/plugins/ruby-bu

react-native

收藏 評論

finally_m 頭像

威哥愛編程 - React Native 核心技術知識點快速入門

大家好，我是 V 哥。React Native 是 Facebook 開發的一個開源框架，用於使用 JavaScript 和 React 構建原生移動應用。它允許開發者使用相同的代碼庫為 iOS 和 Android 平台創建高性能、美觀的應用程序。本文將介紹 React Native 的核心技術知識點，幫助初學者快速入門。 1. 環境搭建 在開始使用 React Native 之前，需要搭建開發環

react-native , Javascript

收藏 評論

shenchendebanma 頭像

miadk - 前端方面移動端適配方法，減少兼容性問題

使用viewport配置，確保完美視口。 meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" 關鍵屬性解析： width=device-width：將視口寬度設置為設備寬度 init

react-native , css3 , 小程序 , ios , Javascript

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - React-native的新架構

本文總結: 文章主要介紹了 React Native 的新架構，包括以下幾個方面的內容：📱✨ 如何抹平 iOS 和 Android 樣式差異，提升跨平台一致性； 分析了舊架構中存在的問題，如通信瓶頸、啓動慢、維護複雜等； 介紹了 JSI 中間層 帶來的變革，如： 不再強依賴 JavaScriptCore 引擎； 可直接在 JS 層調用 Native 方法，提升交互效率； 講解了 R

react-native , 前端

收藏 評論

aion_6356676d25766 頭像

Aion - React Router V7 路由守衞

React Router V7 本身並沒有直接提供內置的路由守衞 API（比如 Vue Router 的 beforeEach），但通過組合其提供的鈎子（如 useNavigate、useLocation）和 React 的組件設計模式，我們可以實現類似的功能，比如權限控制、登錄驗證、數據預加載等場景。 路由守衞 路由守衞是指在路由切換時執行一些邏輯，以決定是否允許導航到目標路由。 常見的場景包括

react , react-native , 前端 , Javascript

收藏 評論

xingfudenaozhong 頭像

幸福的鬧鐘 - 我們都被困在系統裏的…程序員

前言 2020年外賣最火熱的時候，有一篇文章《外賣騎手，困在系統裏》。 作為一個互聯網從業人員，我之前從未有機會體會到，當每一個工作都要被時間和算法壓榨時，我會是一種怎樣的感受。 而最近的一段經歷，我感覺也被困在系統裏了。 起因 如果你是一個研發人員，免不了要值班、處理線上問題。當然這都很正常，每個系統都有bug或者諮詢類的問題。 由於我們面臨的客户比較多，加上系統有一些易用性的問題或bu

react-native , JAVA , 程序員 , 後端 , 前端

收藏 評論

raymond_68666117c3a7d 頭像

Polynesia - CodePush停服後，如何用騰訊Shiply快速實現ReactNative熱更新？

1. 背景 CodePush是微軟VisualStudioAppCenter服務的一個子功能，支持動態下發RN熱更新產物。但是VisualStudioAppCenter 2025/3/31 已經停止服務，如果想繼續使用CodePush需要自己獨立部署。 專門獨立部署一套後台服務，對於個人開發者尤其是客户端開發來説時間成本較高，後期維護也需要投入不少精力，最好還是使用已有的下發平台。 調研了一下發現

熱更新 , react-native , 動態化

收藏 評論

shaogongbra 頭像

ShaoGongBra - duxapp中主題系統是如何實現動態切換的

在舊版本的duxapp，支持主題功能，但是那時候的主體是靜態配置的，並不支持動態切換，新版本，在舊的靜態主題基礎上擴展，實現了動態主題切換 舊版本靜態主題 在之前的版本中已經支持主題功能，在用户配置用，使用模塊的 theme 字段配置主題，像下面這樣 // configs/config/index.js option: { // 基礎模塊 duxapp: { theme: {

react-native , taro

收藏 評論

chengxuyuanlaoliu2024 頭像

程序員老劉 - 跨平台開發地圖：客户端技術選型指南 | 2025年9月

哈嘍，我是老劉 2024年，全球移動應用下載量突破2570億次。 但開發者面臨的問題是——平台越來越多。 以前只有iOS和Android，現在還有鴻蒙、Web、各種小程序... 每個平台都要單獨開發，成本會翻好幾倍。 不僅如此，用户對體驗的要求越來越高。 他們希望在不同設備上看到一模一樣的界面，享受一致的操作體驗。 原生開發做不到這一點。 因為不同平台的設計規範、開發語言、UI組件都不一樣。 這就

react-native , 客户端 , flutter , 跨平台開發

收藏 評論

chengxuyuanlaoliu2024 頭像

程序員老劉 - 跨平台開發地圖：客户端技術選型指南 | 2025年10月

哈嘍，我是老劉 2024年全球移動應用下載量突破2570億次，但開發者面對的現實是：平台越來越多、成本翻倍、體驗難統一。iOS/Android/鴻蒙/桌面端/Web/小程序，各有一套開發與設計規範，原生很難在多設備上做到一致。 跨平台是機會，卻更是選擇題：Flutter講性能、React Native講生態、uni-app講覆蓋、KMP講原生。 如何做好這道選擇題，把有限的資源發揮出最大的效率？

react-native , flutter , .net , kmp , 跨平台開發

收藏 評論

grapecity 頭像

葡萄城技術團隊 - React Native 錯誤處理完全指南

React Native 錯誤處理完全指南 深入解析跨平台應用中的 JS 錯誤、原生崩潰及異常監控方案，附實戰代碼與最佳實踐。 在 React Native 跨平台開發中，錯誤處理是保障應用穩定性與用户體驗的核心環節。不同於純 Web 應用或原生應用，React Native 應用的錯誤來源更為複雜——既包含 JavaScript 層的邏輯錯誤，也涉及 iOS/Android 雙端的原生模塊異常，

react-native

收藏 評論

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 , 前端工程化 , 軟件工程

收藏 評論