Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Vite is a modern frontend build tool that provides a faster and leaner development experience for modern web projects. It leverages native ES modules and is designed to serve your code via HTTP in development, enabling hot module replacement (HMR) for a fast development cycle, and bundles it for production using Rollup.
Instant Server Start
With Vite, you can start a development server instantly due to its use of native ES modules. Here's a simple command to start the server:
npx vite
Hot Module Replacement (HMR)
Vite provides out-of-the-box support for HMR, which enables you to update code and see changes in real-time without a full page reload. The code sample shows how to use HMR with a Vue application.
import { createApp } from 'vue';
const app = createApp(App);
if (import.meta.hot) {
import.meta.hot.accept();
}
Optimized Build
For production, Vite uses Rollup to bundle your code. This results in an optimized build that's ready for deployment. The command to create a production build is straightforward.
npx vite build
Plugin System
Vite supports a rich plugin system that allows you to extend its functionality. This code sample demonstrates how to include the official Vue plugin in your Vite configuration.
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()]
});
TypeScript Support
Vite comes with built-in TypeScript support, allowing you to develop your application using TypeScript without additional setup. The command to start a server with TypeScript support is the same as for JavaScript.
npx vite --host
Webpack is a powerful module bundler that can transform and bundle various types of assets. It is highly configurable and has a large ecosystem of loaders and plugins. Compared to Vite, webpack has a steeper learning curve and can be slower in development due to its build process.
Parcel is a zero-configuration web application bundler. It offers a fast development experience and supports a wide range of file types out of the box. Parcel is similar to Vite in terms of ease of use, but Vite's development server is generally faster due to its use of native ES modules.
Rollup is a module bundler for JavaScript that compiles small pieces of code into something larger and more complex, such as a library or application. It is the same bundler that Vite uses for production builds. Rollup focuses on bundling for production and is not optimized for development speed like Vite.
Snowpack is a build tool that uses JavaScript's native module system (ESM) for unbundled development. It provides a fast development experience by only rebuilding individual files as they change. Snowpack and Vite share similar philosophies, but Vite offers a more integrated experience with features like HMR and pre-configured plugins.
No-bundle Dev Server for Vue 3 Single-File Components
⚠️ Warning: Experimental ⚠️
Create the following files:
index.html
<div id="app"></div>
<script type="module">
import { createApp } from 'vue'
import Comp from './Comp.vue'
createApp(Comp).mount('#app')
</script>
Comp.vue
<template>
<button @click="count++">{{ count }}</button>
</template>
<script>
export default {
data: () => ({ count: 0 })
}
</script>
<style scoped>
button {
color: red;
}
</style>
Then run:
npx vite
Go to http://localhost:3000
, edit the .vue
file to see changes hot-updated instantly.
Imports are requested by the browser as native ES module imports - there's no bundling. The server intercepts requests to *.vue
files, compiles them on the fly, and sends them back as JavaScript.
Alternatively, you can install vite
locally as a dev dependency and run it via npm scripts:
npm install -D vite
# OR
yarn add -D vite
Add scripts to package.json
(here showing that serving the files in src
instead of project root):
{
"scripts": {
"dev": "vite --root src"
}
}
npm run dev
# OR
yarn dev
Native ES imports doesn't support bare module imports like
import { createApp } from 'vue'
The above will throw an error by default. vite
detects such bare module imports in all served .js
files and rewrite them with special paths like /@modules/vue
. Under these special paths, vite
performs module resolution to locate the correct files on disk:
vue
has special handling: you don't need to install it since vite
will serve it by default. But if you want to use a specific version of vue
(only supports Vue 3.x), you can install vue
locally into node_modules
and it will be preferred (@vue/compiler-sfc
of the same version will also need to be installed).
If a web_modules
directory (generated by Snowpack)is present, we will try to locate the module it.
Finally we will try resolving the module from node_modules
, using the package's module
entry if available.
*.vue
files come with HMR out of the box.
For *.js
files, a simple HMR API is provided:
import { foo } from './foo.js'
import { hot } from '/@hmr'
foo()
hot.accept('./foo.js', ({ foo }) => {
// the callback recevies the updated './foo.js' module
foo()
})
Note it's simplified and not fully compatible with webpack's HMR API, for example there is no self-accepting modules, and if you re-export foo
from this file, it won't reflect changes in modules that import this file.
Install the corresponding pre-processor and just use it! (Currently requires local installation of vite
for correct resolution).
yarn add -D sass
<style lang="scss">
/* use scss */
</style>
You can customize the server using the API. The server can accept plugins which have access to the internal Koa app instance. You can then add custom Koa middlewares to add pre-processor support:
const { createServer } = require('vite')
const myPlugin = ({
root, // project root directory, absolute path
app, // Koa app instance
server // raw http server instance
}) => {
app.use(async (ctx, next) => {
// You can do pre-processing here - this will be the raw incoming requests
// before vite touches it.
if (ctx.path.endsWith('.scss')) {
// Note vue <style lang="xxx"> are supported by
// default as long as the corresponding pre-processor is installed, so this
// only applies to <link ref="stylesheet" href="*.scss"> or js imports like
// `import '*.scss'`.
console.log('pre processing: ', ctx.url)
ctx.type = 'css'
ctx.body = 'body { border: 1px solid red }'
}
// ...wait for vite to do built-in transforms
await next()
// Post processing before the content is served. Note this includes parts
// compiled from `*.vue` files, where <template> and <script> are served as
// `application/javascript` and <style> are served as `text/css`.
if (ctx.response.is('js')) {
console.log('post processing: ', ctx.url)
console.log(ctx.body) // can be string or Readable stream
}
})
}
createServer({
plugins: [
myPlugin
]
}).listen(3000)
This project is highly experimental at this stage and is not production oriented. However, a valid Vite application can in theory be bundled with Rollup + rollup-plugin-vue@next
so it can be deployed as a static site.
FAQs
Native-ESM powered web dev build tool
The npm package vite receives a total of 12,479,556 weekly downloads. As such, vite popularity was classified as popular.
We found that vite demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.