⚡️ Vite - Modern JavaScript Bundler | Full Course
HTML-код
- Опубликовано: 2 июн 2024
- Let's explore the power of modern frontend bundler Vite.
X - / igorbabko
🧪 Repository: github.com/igorbabko/builds-w...
🧪 Source code for every lesson: github.com/igorbabko/builds-w...
🎨 VS Code theme:
marketplace.visualstudio.com/...
🎨 VS Code icons:
marketplace.visualstudio.com/...
marketplace.visualstudio.com/...
✍️ Font:
philpl.gumroad.com/l/dank-mono
www.jetbrains.com/lp/mono/
🍿 Playlist: • Vue Composition API с ...
#vite #vitejs #frontend #bundler
🕛 Time codes:
00:00 - Installing Vite
05:48 - Resolving NPM dependencies
13:41 - CSS imports
17:28 - CSS modules
23:48 - PostCSS plugins (TailwindCSS installation)
29:17 - CSS pre-processors (Sass)
32:37 - JSON imports
34:38 - Static assets
38:32 - Public directory
44:25 - Glob imports
52:36 - Named glob imports
57:40 - JSX
01:10:10 - TypeScript
01:17:08 - ESLint
01:21:56 - Path aliases
01:26:03 - Environment variables
01:35:22 - Multi-page app
01:44:45 - Library mode
01:57:36 - Multiple library entry points
02:04:53 - Importing library using require
02:09:57 - External dependencies
02:17:45 - Publishing NPM package
02:27:41 - Image optimization
02:33:19 - Plugin creation
02:42:01 - Plugin options
02:51:28 - Server options
02:58:16 - Hot Module Replacement (HMR)
03:08:28 - Client-server Communication
03:14:28 - Accepting hot updates
03:24:14 - Disposing hot updates
03:32:38 - Vue integration
03:37:47 - React integration
03:44:03 - Deploying Vite project
X - twitter.com/igorbabko
Bro I love your tutorials,
Big sub! ❤
I'm glad to hear that!
amazing content man, thanks so much
Glad you liked it!
Very detailed and helpful. Thanks!
You are welcome!
Thank you so much. It was such a learning curve but this tutorial is absolutely amazing.
I'm glad to hear that, thanks!!
Thanks! Exactly what I was looking for!
Glad I could help!
the best vite course on youtube!
I highly appreciate your support!
wow amazing content!!!
Thanks a lot for the support!
many thanks to you... simple and easy tutorial. I wish you get millioner in 3 weeks :)
I highly appreciate your support, thanks a lot!
Thanks, great content!
Glad you liked it!
@@igor_babko Any schedule making an UNOCSS - Vite tutorial?
There are no such plans, at least for now.
thank you so much!!
You are very welcome!
Thank you!
You are welcome!
Awesome video!
What tools do you use to create your video content? Your IDE and browser are super clean, I'm curious on how you do that :)
Thanks a lot!
I use Screenflow to record all videos, and I record video and audio separately. As for IDE setup, there is a full playlist on the channel on how I customize VS Code to look almost like in this video - ruclips.net/p/PLXDouhCU5r6q10ef9yXxzY4GwVpAQMvsZ
Or if you prefer long videos, there is also an all-in-one video where all those individual lessons are combined into - ruclips.net/video/HFua2nClrVA/видео.html
As for the Firefox theme, I have created a custom theme just to match the spirit of VS Code theme 🙂 - addons.mozilla.org/en-US/firefox/addon/aura-spirit-dracula/
@@igor_babko thanks so much for the detailed answer!!
You are welcome!
Thank you so much
You are very welcome!
Keep spirits bro...
Thanks for the support and subscription!
Thanks you so much for this, question if i want use remote Handlebars template, how can i replace the default html ?
You are welcome! Sorry, I didn't fully understand your use case. Maybe this plugin is something you may want to consider in regard to Handlerbars - vituum.dev/plugins/handlebars.html#handlebars
Hello, I'm trying to configure Vite to be multi apps and I don't want the src folder either! node_modules, will be for all projects and not that a specific app has its own package.json files, otherwise package.json will be adopted for all apps, but imagine that I have a structure like this
APPS/
APP1/
Home/
APP2/
Home/
node_modules
shared/ to share resources, components, functions in common for all apps
package.json
vite.config.sj
I need node_modules to be for all projects
the app1 project will run on port 3000, app2 on port 3001
I even had to configure workspace to work, but I can do it
work how could I do this configuration
Hi there,
That sounds much like Monorepo architecture. Explaining it here will be pretty lengthy. I would suggest taking a look at this repo to get an idea how to set up monorepo with Vite apps - github.com/adiun/vite-monorepo
You can also check out this article to learn more - hackernoon.com/how-to-set-up-a-monorepo-with-vite-typescript-and-pnpm-workspaces
02:38:50 Here, we parse and export stringified records, but on the client side, we receive an array of records instead of stringified ones. How did this happen?
Well, after stringifying records we eventually return such content to the client (in the form of a string)
export default [{
"id": "1",
"name": "apple",
"quantity": "5"
}, {
"id": "2",
"name": "orange",
"quantity": "8"
}, {
"id": "3",
"name": "banana",
"quantity": "3"
}]
when we import this
import products from './products.csv'
so when a browser reads the content of this import it sees that module exports an array instead of a stringified array. And that's how we get an array of records on the client. Does it make sense?
Thank you for your reply. A great video. @@igor_babko
Sure, no problem.
Do you know how to use browser sync with this? I want to set up to use it on my local network to test on different devices in my house such as phone, iPad, browsers etc. in webpack I can do it using my clumpier to host it on local network
I haven't tried it myself, but the first result that I've got after googling is this plugin - github.com/Applelo/vite-plugin-browser-sync
Not sure if you've already tried it.
@@igor_babko ohh dude didn’t even notice, but vite comes with as default, just have to use -host flag and it puts it on local network. With browser sync and webpack in the past you had to manually set up… not to mention I had to turn off firewall on computer to allow it to work… and vite is way better then webpack… so much easier
I'm glad you have figured this out!
Сильно
Спасибо большое)
owesome but what happend with repos?
My GitHub account was temporarily suspended, but now it's all good, repository links work again.
@@igor_babko 🙏
vite do not support "import type {foo} from" i have error Expected "from" but found "{"
It should work by default.
I've tried this:
// main.ts
import type { User } from './User'
const user: User = {
name: 'Igor'
}
console.log(user)
// User.ts
export type User = {
name: string
}
And it compiled without errors.
By the way, are you trying in Vue project?
@@igor_babko export interface User {
name: string
}
For me it works both ways, either like this
import type { User } from "./user";
or like this
import { User } from "./user";
Please - Vite + Jest + React Testing Library
I will note this topic for myself, but for now I can't guarantee that I'll do such a video. Thanks for the topic, anyway!
@@igor_babko Thank you too, best wishes!
👍
The Next Brad Traversy, ❤
Thank you for believing in me!
Very hard to follow after 3 minutes ( i am beginner)
Just curious, what would make this video easier to follow for you? A slower pace or some other aspects?