![Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack](https://cdn.sanity.io/images/cgdhsj6q/production/6af25114feaaac7179b18127c83327568ff592d1-1024x1024.webp?w=800&fit=max&auto=format)
Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
vite
Advanced tools
Package description
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.
Readme
No-bundle Dev Server for Vue 3 Single-File Components.
$ npx create-vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
If using Yarn:
$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev
The primary difference is that for vite
there is no bundling during development. The ES Import syntax in your source code is served directly to the browser, and the browser parses them via native <script module>
support, making HTTP requests for each import. The dev server intercepts the requests and performs code transforms if necessary. For example, an import to a *.vue
file is compiled on the fly right before it's sent back to the browser.
There are a few advantages of this approach:
Since there is no bundling work to be done, the server cold start is extremely fast.
Code is compiled on demand, so only code actually imported on the current screen is compiled. You don't have to wait until your entire app to be bundled to start developing. This can be a huge difference in apps with dozens of screens.
Hot module replacement (HMR) performance is decoupled from the total number of modules. This makes HMR consistently fast no matter how big your app is.
Full page reload could be slightly slower than a bundler-based setup, since native ES imports result in network waterfalls with deep import chains. However since this is local development, the difference should be trivial compared to actual compilation time. (There is no compile cost on page reload since already compiled files are cached in memory.)
Finally, because compilation is still done in Node, it can technically support any code transforms a bundler can, and nothing prevents you from eventually bundling the code for production. In fact, vite
provides a vite build
command to do exactly that so the app doesn't suffer from network waterfall in production.
vite
is highly experimental at this stage and is not suitable for production use, but we hope to one day make it so.
es-dev-server
is a great project and we did take some inspiration from it when refactoring vite
in the early stages. That said, here is why vite
is different from es-dev-server
and why we didn't just implement vite
as a middleware for es-dev-server
:
vite
supports Hot Module Replacement, which surgically updates the updated module without reloading the page. This is a fundamental difference in terms of development experience. es-dev-server
internals is a bit too opaque to get this working nicely via a middleware.
vite
aims to be a single tool that integrates both the dev and the build process. You can use vite
to both serve and bundle the same source code, with zero configuration.
vite
requires native ES module imports. It does not intend to burden itself with support for legacy browsers.
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 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', (newFoo) => {
// the callback receives the updated './foo.js' module
newFoo.foo()
})
// Can also accept an array of dep modules:
hot.accept(['./foo.js', './bar.js'], ([newFooModule, newBarModule]) => {
// the callback receives the updated mdoules in an Array
})
Modules can also be self-accepting:
import { hot } from '@hmr'
export const count = 1
hot.accept(newModule => {
console.log('updated: count is now ', newModule.count)
})
Note that vite
's HMR does not actually swap the originally imported module: if an accepting module re-exports imports from a dep, then it is responsible for updating those re-exports (and these exports must be using let
). In addition, importers up the chain from the accepting module will not be notified of the change.
This simplified HMR implementation is sufficient for most dev use cases, while allowing us to skip the expensive work of generating proxy modules.
Install the corresponding pre-processor and just use it!
yarn add -D sass
<style lang="scss">
/* use scss */
</style>
Note importing CSS / preprocessor files from .js
files, and HMR from imported pre-processor files are currently not supported, but can be in the future.
Starting with version ^0.5.0
, you can run vite build
to bundle the app and deploy it for production.
vite build --root dir
: build files in the target directory instead of current working directory.
vite build --cdn
: import vue
from a CDN link in the built js. This will make the build faster, but overall the page payload will be larger because therer will be no tree-shaking for Vue APIs.
Internally, we use a highly opinionated Rollup config to generate the build. There's not much you can configure from the command line, but if you use the API, then the build is configurable by passing on most options to Rollup (see below).
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
watcher // chokidar file watcher 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)
const { build } = require('vite')
;(async () => {
// All options are optional.
// check out `src/node/build.ts` for full options interface.
const result = await build({
rollupInputOptions: {
// https://rollupjs.org/guide/en/#big-list-of-options
},
rollupOutputOptions: {
// https://rollupjs.org/guide/en/#big-list-of-options
},
rollupPluginVueOptions: {
// https://github.com/vuejs/rollup-plugin-vue/tree/next#options
},
root: process.cwd(),
cdn: false,
write: true,
minify: true,
silent: false
})
})()
vite is the french word for "fast" and is pronounced /vit/
.
MIT
FAQs
Native-ESM powered web dev build tool
The npm package vite receives a total of 10,976,974 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
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.