iT邦幫忙

vite相關文章
共有 100 則文章
鐵人賽 自我挑戰組 DAY 18
30天深入淺出Redux 系列 第 18

技術 Redux 深入淺出 - [ Day 18 ] React Redux 簡介

在整進 React 專案之前我們必須了解一件事,Redux 是可以單獨獨立運作的,這也是我們之前所做的兩個 project 驗證的結果,大家應該都不陌生,兩個...

鐵人賽 影片教學 DAY 2
Vite 原始碼解讀 系列 第 2

技術 [Vite 原始碼解讀] npm run dev 之後...

30 天影集播放清單 https://www.youtube.com/playlist?list=PLBd8JGCAcUAEFJzjAQC6DbWTeDIC...

鐵人賽 Modern Web DAY 6

技術 Day 06 你的 Javascript 不是你的 Javascript(Webpack 與 Vite 簡介)

Webpack 它為了解決什麼問題而生? 正如我在 Day 03 提過的,在各種執行環境、規格、版本、語法大亂鬥的時代,把開發環境的程式碼與資料轉換成適合佈署到...

鐵人賽 Vue.js DAY 28
Vue3歡樂套件箱耶 系列 第 28

技術 開箱28:新手搭建~Vue+Vite+GitHub部署到Firebase Hosting

Firebase 託管為您的 Web 應用、靜態和動態內容以及微服務提供快速且安全的託管。 簡介Firebase Hosting收費方式https://fir...

鐵人賽 Modern Web DAY 22

技術 你知道這是什麼嗎? Chrome extension MV3 With Vite - Day 22 Content Script 中使用 ES6 Module (補充說明篇)

Hi Dai Gei Ho~ 我是Winnie ~ 在昨天章節的內容中,我們介紹了如何在 Extension 中使用 Es6 Module,其中 Conten...

鐵人賽 自我挑戰組 DAY 26
30天深入淺出Redux 系列 第 26

技術 Redux 深入淺出 - [ Day 26 ] React RTK Typescript 基本應用

接續前一篇的進度,我們已經設置好 store 了,接著我們來試做一個簡單的 counter 講解一下在 Typescript 的環境下如何處理我們的 slice...

鐵人賽 Modern Web DAY 1
30天30個前端任務 系列 第 1

技術 #0. 前言+環境配置

前言 Hi!我是SingYo,謝謝你點進來看這個系列!這是我第一次參加鐵人賽。 其實說30個前端「任務」有點籠統,較精確的說法會像是UI元件(UI compon...

鐵人賽 Modern Web DAY 8

技術 Day 08:現代 bundler、build tool 簡介 (Vite、esbuild、Rspack、Rolldown、Turbopack)

文章已同步發表於個人部落格,也可以前往觀賞好讀版。 前言 前面模組化歷史不小心鑽太深,在稍微有點長的前情提要後,今天終於要講回正題了。 在 Webpack...

30天深入淺出Redux 系列 第 31

技術 [DLC] React Query 補充包

這篇是補足大家的求知慾,還記得我開頭說的 React Query 嗎? 我秉持著勤儉持家的客家精神,想說不要浪費我們建立好的 todo api server,順...

鐵人賽 JavaScript DAY 13

技術 【Day12】Vue CLI v.s Vite 超級比一比

在我們剛開始踏入Vue的世界是透過Node.js來安裝最新版本的Vue專案,其底層建構器就是Vite負責。但網路很多資源都還是應用Vue CLI寫出來的範本,究...

技術 從 Vue CLI 轉換 Vite 的踩坑紀錄

最近在把將原本使用 Vue CLI 開發的專案轉換成使用 Vite 建構畢竟 Vite 真的很快啊過程中,遇到了一些需要特別處理的部分,在此做個紀錄 impor...

鐵人賽 自我挑戰組 DAY 28
30天深入淺出Redux 系列 第 28

技術 Redux 深入淺出 - [ Day 28 ] React RTK Query Typescript 實作

前一篇我們大致上了解了 API server 的運作與 todo 的格式,今天讓我們回歸主線,來使用 RTK query 整理我們的剛才的 todo APIs,...

鐵人賽 Modern Web DAY 19

技術 你知道這是什麼嗎? Chrome extension MV3 With Vite - Day 19 用 Vite 創建一個 Extension 吧

Hi Dai Gei Ho~ 我是Winnie ~ 從此篇文章開始,我們將進入 使用 Vite 開發 Extension 系列篇。 經過了這麼多天的介紹,...

鐵人賽 自我挑戰組 DAY 22
30天深入淺出Redux 系列 第 22

技術 Redux 深入淺出 - [ Day 22 ] React Redux 資金功能設定

前面的章節我們完成了完整的商品進貨購買功能,是時候算個帳了! 今天就是要把錢的部分給加進來,我們可以從先前的 Redux Toolkit 的專案內搬移 ass...

鐵人賽 Modern Web DAY 13

技術 Day 13:來試著追一下 Vite 原始碼 (2) - Chokidar、pre-bundling 初探

前言 昨天追到 createServer 中的 Chokidar 這段,今天來繼續往下看,看能學到什麼新東西! Vite 怎麼做到監聽檔案異動變化 在 cre...

鐵人賽 自我挑戰組 DAY 20
30天深入淺出Redux 系列 第 20

技術 Redux 深入淺出 - [ Day 20 ] React Redux 商品功能設定-(咖啡&咖啡豆)

前一篇,我們已經完成了咖啡商品的購買功能,以及示範了 React 的 component 拆分方法,那麼這篇我們就接續完成另一項進貨的功能吧! 首先,我們先回...

鐵人賽 Modern Web DAY 18

技術 Day 18:Vite 系列總整理

前言 這整個系列文轉眼間也要進入下半場,在 Day 9 到現在的 Day 18 不小心用了有一些多的篇幅在研究 Vite,其實原本還有 HMR、Module...

鐵人賽 自我挑戰組 DAY 23
30天深入淺出Redux 系列 第 23

技術 Redux 深入淺出 - [ Day 23 ] React Redux 非同步處理

如果一路跟到這邊的話應該會覺得處理上很容易,事實上確實也是如此,因為前面的規劃已經完成了,包含非同步事件的處理,這些也就只是 javascript 的基本觀念而...

鐵人賽 自我挑戰組 DAY 19
30天深入淺出Redux 系列 第 19

技術 Redux 深入淺出 - [ Day 19 ] React Redux setup

前篇我們已經完成了基本的 Store setting,並透過 React Redux 的 provider 提供所有 component 來使用,其用意與 Re...

鐵人賽 自我挑戰組 DAY 24
30天深入淺出Redux 系列 第 24

技術 Redux 深入淺出 - [ Day 24 ] React Redux Pokemon 換頁功能

前一篇我們已經完成大致上所有的功能了,今天篇稍微調整一下 UI 畫面,並讓我們的選單有上下頁的功能。 我們已知回傳資料內有上下頁完整的 url 了,所以我們也...

鐵人賽 Modern Web DAY 11

技術 Day 11:用實驗來理解 Vite 的 dependency pre-bundling 是什麼 (2)

(Photo by Jr Korpa) 此為 Vite dependency pre-bundling 的下集,如果還沒看過上集可以點這裡 實驗 3. 載...

鐵人賽 自我挑戰組 DAY 21
30天深入淺出Redux 系列 第 21

技術 Redux 深入淺出 - [ Day 21 ] React Redux 商品功能設定 - (蛋糕)

前篇我們已經完成咖啡與咖啡豆兩樣商品的搬遷,今天我們將蛋糕的部分也移植過來我們 React 的專案裡面,也順便加深使用的印象。 還記得怎麼處理嗎? Start...

鐵人賽 影片教學 DAY 3
Vite 原始碼解讀 系列 第 3

技術 [Vite 原始碼解讀] createServer part1

Youtube 連結:https://www.youtube.com/watch?v=nU5KAiiydNI 在上一集我們追原始碼追到當執行了 npm ru...

鐵人賽 SideProject30 DAY 9

技術 Day9—Vue(三)創建Vue專案(Vite)

前言 昨天大致介紹了Vue的核心概念,今天就來談建置環境的部分。 創建環境 在 Vue 官方文件中,官方建議開發人員將 Vite 作為 Vue.js 應用程...

鐵人賽 SideProject30 DAY 10

技術 Day10—Vue(四)Vue專案架構與部屬網站

前言 昨天創建完了Vue的環境,今天我們將會介紹旁邊資料夾分別負責放置哪些檔案。 專案架構 建完架構後,我們可以看到旁邊資料夾的結構如下: node_mo...

鐵人賽 Modern Web DAY 15

技術 Day 15:來做個實驗 - 壓測 Vite 的效能瓶頸

前言 看了幾天的 pre-bundling 原始碼,在進到最後打包階段程式碼前,我想先實驗一下前幾天研究時突然好奇的一個問題:「如果一個拿 Vite 當 bu...

鐵人賽 Software Development DAY 6

技術 [第六隻羊] 迷霧森林建築工事 V 哈囉世界安安vue

天亮了 昨晚是平安夜 關於迷霧森林故事 Rock you,Rock you,Rock you 敲家門沒人應沒的 Rocky找不到先行離開招集會的父母有點著急沿著...

鐵人賽 影片教學 DAY 5
Vite 原始碼解讀 系列 第 5

技術 [Vite 原始碼解讀] createServer part2

30 天影集播放清單 https://www.youtube.com/playlist?list=PLBd8JGCAcUAEFJzjAQC6DbWTeDIC...

鐵人賽 影片教學 DAY 28
Vite 原始碼解讀 系列 第 28

技術 [Vite 原始碼解讀] 動手實作陽春版 Vite part 1 - Dev Server

30 天影集播放清單 https://www.youtube.com/playlist?list=PLBd8JGCAcUAEFJzjAQC6DbWTeDIC...

鐵人賽 Modern Web DAY 9

技術 Day 09:為什麼 Vite 的冷啟動可以這麼快?

文章已同步發表於個人部落格,也可以前往觀賞好讀版。 前言 昨天簡介了這麼多套 bundler、build tool 後,今天想開始來動手做一些東西,但 Ru...