Hot Module Replacement is Easy - Bjorn Lu
If you've built projects with Vite, chances are you've also used Hot Module Replacement (HMR). HMR allows you to update your code without having to refresh the page, such as editing a component markup or adjusting styles, the changes are immediately reflected in the browser, which enables faster code interation and improved developer experience. While HMR is also a feature in other bundlers like W
JavaScriptビルドツールã®æ•´ç† å„ツールã®æ©Ÿèƒ½ã¨ä¾å˜é–¢ä¿‚
フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®ãƒ“ルドツールãŒè‰²ã€…ã‚ã‚Šã™ãŽã¦ã€ä½•ãŒã©ã†ãªã£ã¦ã„ã‚‹ã®ã‹ãŒã‚ã‹ã‚Šã¥ã‚‰ã„ãŸã‚〠å„ツールãŒã§ãã‚‹ã“ã¨ã€ç‰¹å¾´ ツール間ãŒã©ã®ã‚ˆã†ã«ä¾å˜ã—ã‚ã£ã¦ã„る㋠を一気ã«èª¿ã¹ã¦æ•´ç†ã—ãŸã€‚(æƒ…å ±ã¯2023/10時点) æ¦‚è¦ ãƒ„ãƒ¼ãƒ«ã®ä¾å˜é–¢ä¿‚æ•´ç† ä¸Šå±¤: dev server付ãã®ãƒãƒ³ãƒ‰ãƒ©/ビルドツール。アプリ開発者ãŒç›´æŽ¥configãªã©ã‚’書ã„ã¦å–り扱ã†ã®ã¯ã“ã“ãŒå¤šã„ã¨æ€ã‚れる。(Next.jsã«é–¢ã—ã¦ã¯ã€ãƒ“ルド機能ã«ç€ç›®ã—ãŸå ´åˆ) 下層: やや基盤的ãªdev serverãªã—ã®ãƒ„ール群。 矢å°ã¯ã€æ˜Žç¤ºçš„ãªä¾å˜é–¢ä¿‚を表ã™ã€‚実際ã«ã¯ã€æ˜Žç¤ºçš„ãªä¾å˜é–¢ä¿‚ãŒãªãã¦ã‚‚ã€ä¸‹å±¤ã®ãƒ„ール群ã¯ä¸Šå±¤ã®ãƒãƒ³ãƒ‰ãƒ©(ã‚„Rollup)ã«å¯¾ã—ã¦ãƒ—ラグインをæä¾›ã—ã¦ã„ã‚‹ã“ã¨ãŒå¤šã„。 å„ツールã®ã§ãã‚‹ã“ã¨æ•´ç† ツールã”ã¨ã«ã€å¤§ã¾ã‹ãªæ©Ÿèƒ½åŒºåˆ†ã§ã€ã§ãã‚‹ã“ã¨ã¨ã§ããªã„ã“ã¨ã‚’ã¾ã¨ã‚ãŸã€‚ å„機能区分ã®å®šç¾©ã¯æ¬¡ã‚»ã‚¯ã‚·ãƒ§ãƒ³ã‚’å‚照。 ツールã”ã¨
How Vite Came to Be (ViteConf 2022)
How Vite Came to Be Evan You ViteConf 2022 Hello everyone! I am Evan You, the original author of Vite and Vue. Similar to how I started on Vue, I had no idea that it would grow into something that deserves a whole conference about it. What’s more amazing is that Vite today has grown into such a t...
A Proposal For Module Resolution · Issue #50152 · microsoft/TypeScript
Background When a user writes a module specifier (the string literal after from in an import declaration) in a TypeScript file, how should the compiler resolve that string to a file on disk to be included in type checking? Because TypeScript never rewrites module specifiers in its JavaScript emit, the only possible answer is that it should mirror whatever resolution behavior the code’s intended ru
Vite 3 ãŒæŽ¡ç”¨ã—㟠CJS Proxy ã«ã‚ˆã‚‹ Dual Package 構æˆ
2022 å¹´ç¾åœ¨ã€Node.js 界隈㯠ESM (ES Module) ã¸ã®ç§»è¡Œã®éŽæ¸¡æœŸã§ã‚ã‚Šã€ç‰¹ã«æ—¢å˜ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã«ãŠã„ã¦ã¯ CJS (CommonJS) 構æˆã§ã‚ã‚‹ã“ã¨ãŒã¾ã ã¾ã 多ã„。ã¾ãŸã€Pure ESM 㪠npm パッケージã¯ã€CSJ プãƒã‚¸ã‚§ã‚¯ãƒˆã‹ã‚‰ã®åˆ©ä¾¿æ€§ãŒæ‚ªãã€dynamic import ãŒå¿…é ˆã§éžåŒæœŸåŒ–ã‚’å¼·ã„られãŸã‚Š TypeScript ã®è¨å®šå¤‰æ›´ãŒå¿…è¦ã ã£ãŸã‚Šã¨é¢å€’ãŒå¢—ãˆã‚‹ã€‚ ãã‚“ãªçŠ¶æ³ã®ãŸã‚ã€åºƒã使ã‚ã‚ŒãŸã„ npm パッケージを公開ã™ã‚‹å ´åˆã€importã§ã‚‚requireã§ã‚‚利用ã§ãるよㆠdual package 構æˆã‚’å–ã‚ŠãŸããªã‚‹ãŒã€å®šç•ªæ‰‹æ³•ãŒç¢ºç«‹ã—ã¦ã„ã‚‹ã¨ã¯è¨€ãˆãšã€æ„外ã¨é¢å€’ãŒå¤šã„。よã見るã®ã¯ã€tscã‚„esbuildç‰ã§ ESM 用㨠CJS 用ã®è¨å®šãƒ•ã‚¡ã‚¤ãƒ«ã‚’用æ„ã—ã¦ãã‚Œãžã‚Œåˆ¥ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªã«å‡ºåŠ›ã—ã€ãƒ‘ッケージã«ä¸¡æ–¹åŒæ¢±ã—㦠conditional ex
Vite 3.0 is out! | Vite
Vite 3.0 is out! ​ July 23, 2022 - Check out the Vite 4.0 announcement In February last year, Evan You released Vite 2. Since then, its adoption has grown non-stop, reaching more than 1 million npm downloads per week. A sprawling ecosystem rapidly formed after the release. Vite is powering a renewed innovation race in Web frameworks. Nuxt 3 uses Vite by default. SvelteKit, Astro, Hydrogen, and Sol
Chromeæ‹¡å¼µ ã¤ãã‚Šã‹ãŸ 令和最新版
æ•°å¹´ã¶ã‚Šã«Chromeæ‹¡å¼µã®ã¤ãã‚Šã‹ãŸã‚’調ã¹ãŸã€‚ 本当ã«ä½•ã‚‚分ã‹ã‚‰ãªã‹ã£ãŸã®ã§ã€Twitterã§ã€Œ2022å¹´ã«Chromeæ‹¡å¼µã¤ãã‚ŠãŸã‹ã£ãŸã‚‰ä½•è¦‹ã¦å¦ã¹ã°ã„ã„？ã€ã¨ã¤ã¶ã‚„ã„ã¦ã¿ãŸã¨ã“ã‚ã€ä½•äººã‹ã®äººãŒæ•™ãˆã¦ãã‚ŒãŸã€‚æ•™ãˆã¦ã‚‚らã£ãŸä¸ã‹ã‚‰å¹¾ã¤ã‹ã®ãƒªãƒ³ã‚¯å…ˆã‚’紹介ã™ã‚‹ã‚ˆã†ãªå½¢ã§è¨˜è¿°ã—ã¦ã„ã。 Create a Vite-React Chrome Extension in 90 seconds - DEV Community 2022年時点ã ã¨æ¯”較的新ã—ã‚ã®ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰å‘ã‘ツールã§ã‚ã‚‹viteã¨ã€viteã®Chromeæ‹¡å¼µå‘ã‘プラグインã§ã‚ã‚‹@crxjs/vite-pluginを使ã£ã¦Chrome拡張をã¤ãã£ã¦ã¿ã‚ˆã†ã€ã¨ã„ã†è¨˜äº‹ã€‚今回自分ã¯ä¸»ã«ã“れをå‚考ã«ã—ãªãŒã‚‰é–‹ç™ºã‚’進ã‚ãŸã€‚Reactã¨è¨€ã£ã¦ã„ã‚‹ãŒã€è‡ªåˆ†ã®Chromeæ‹¡å¼µã§ã¯UIã¯å˜åœ¨ã—ãªã‹ã£ãŸã®ã§ã€Reactã«é–¢ã™ã‚‹éƒ¨åˆ†ã¯èªã¿é£›ã°ã—ã¦ã€vite
Create a Vite-React Chrome Extension in 90 seconds
The bundler configuration for a Chrome Extension can be pretty complex. When I started making Chrome Extensions, they were small projects for clients who wanted to automate a task. I was starting a new Chrome Extension almost every week, and it took too much time to configure a new project. Then I thought, "We already have a manifest; why do we need more config files?" That's the idea behind CRXJS
Playwright & Vite ã§ã¯ã˜ã‚る脱レガシーå‘ã‘è»½é‡ Visual Regression Test - Cybozu Inside Out | サイボウズエンジニアã®ãƒ–ãƒã‚°
ã“ã‚“ã«ã¡ã¯ï¼ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ã‚スパートãƒãƒ¼ãƒ ã® @mugi_uno ã§ã™ã€‚ ã¿ãªã•ã‚“㯠Visual Regression Test ã¯æ™®æ®µæ´»ç”¨ã—ã¦ã„ã¾ã™ã‹ï¼Ÿ 昨今ã§ã¯äº‹ä¾‹ã‚‚よã耳ã«ã™ã‚‹ã‚ˆã†ã«ãªã£ãŸå°è±¡ã§ã™ã€‚一度使ã£ã¦æ‰‹æ”¾ã›ãªããªã£ãŸæ–¹ã‚‚ã„ã‚‹ã®ã§ã¯ãªã„ã§ã—ょã†ã‹ã€‚ 今回ã®è¨˜äº‹ã§ã¯ã€é€šå¸¸ã®ãƒ—ãƒãƒ€ã‚¯ãƒˆæ–°è¦é–‹ç™ºã¨ã¯ç•°ãªã‚‹ “脱レガシー†ã®æ–‡è„ˆã§ Playwright を用ã„ãŸç°¡æ˜“的㪠Visual Regression Test を試ã—ã¦ã¿ãŸã®ã§ã€å°Žå…¥ã«è‡³ã‚‹çµŒç·¯ã¨ã€ã©ã®ã‚ˆã†ã«å®Ÿæ–½ã—ã¦ã„ã‚‹ã‹ã‚’紹介ã—ã¾ã™ã€‚ フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ãƒªã‚¢ãƒ¼ã‚テクãƒãƒ£ã¨ã‚µã‚¤ãƒ¬ãƒ³ãƒˆãƒªãƒªãƒ¼ã‚¹ ç¾åœ¨ã‚µã‚¤ãƒœã‚¦ã‚ºã§ã¯ kintone ã®ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ãƒªã‚¢ãƒ¼ã‚テクãƒãƒ£ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã¨ç§°ã—ã¦ã€Closure Tools ã‹ã‚‰ React ã¸ã®è„±ãƒ¬ã‚¬ã‚·ãƒ¼ä½œæ¥ãŒé€²è¡Œä¸ã§ã™ã€‚プãƒã‚¸ã‚§ã‚¯ãƒˆã®è©³ç´°ã«ã¤ã„ã¦ã¯ @koba04 ãŒæ›¸ã„ãŸæ¬¡ã®è¨˜äº‹ã‚’ã”覧ãã ã•
The Vite Ecosystem
The Vite Ecosystem ​One of the strongest points in Vite is the ecosystem around it. Vite took responsibilities from frameworks (common web patterns, glob imports, HMR API, SSR primitives, build optimizations), freeing other maintainers from reinventing the wheel each time by offering a common ground where to collaborate, fostering a lot of explorations in the space. Maintainers from several popula
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
State of Vite (ViteConf 2023)
https://twitter.com/youyuxi/status/1585040261922820096
GitHub - sapphi-red/vitest-github-actions-reporter: Vitest reporter to create annotations when running tests in GitHub Actions
GitHub - bluwy/whyframe: Develop components in isolation with just an iframe
feat!: migrate to ESM by antfu · Pull Request #8178 · vitejs/vite
GitHub - fastify/fastify-vite: Fastify plugin for Vite integration.
GitHub - originjs/vite-plugin-federation: Module Federation for vite & rollup
GitHub - egoist/vite-plugin-compile-time: Some compile-time magic for your Vite project
GitHub - rakkasjs/rakkasjs: Bleeding-edge React framework powered by Vite
rollup-plugin-copy · Issue #1231 · vitejs/vite
{{#tags}}- {{label}}
{{/tags}}