58.1k stars front-end development technology stack (tools): 2023 In-depth understanding of the installation and use of the rapid development tool vite (details)

Vite is a rapid front-end development and building tool that can greatly increase the speed of web application development. The main features of Vite are fast startup times and fast hot updates, which allow developers to test and debug their code faster. Its goal is to provide a simple, lightweight development environment that can quickly start projects and preview in real time.

Original text of this article: Front-end development technology stack (tools): 2023 In-depth understanding of the installation and use of the rapid development tool vite (details) 58.1k stars

For more technical points related to the Vue front-end, please pay attention to the public account: CTO Plus ’s subsequent posts. If you have any questions, please leave a message in the background for communication.

Vite adopts a new development model that leverages the native ES module support of modern browsers to defer the build step in the development process to runtime. In this blog, I will have an in-depth understanding of Vite, including its features, composition, installation and use, hot updates, environment variables, plug-in installation and configuration, startup of the development server, and how to use it to accelerate our development process, and finally some of its other functions (caching, ts, css, static resource processing, etc.).

For more explanations of Vue development technology, please pay attention to the follow-up articles of the public account CTO Plus .

Vite Overview

Vite is a new generation of front-end development and construction tools that can significantly improve the front-end development experience. Vite is intended to provide out-of-the-box configuration, while its plug-in API and JavaScript API bring a high degree of extensibility and complete type support. Due to its native ES module import method, very fast cold server startup can be achieved.

Big front-end column: https://blog.csdn.net/zhouruifu2015/category_5734911

Vite is a front-end construction tool based on native ES-Module developed by You Yuxi, the author of vue, when he was developing vue3.0 . In his later promotion of vue3, he was full of praise for his new work Vite, and said that he would "never go back to webpack again."

Vite's build

Vite provides a set of native ESM HMR APIs. HMR-capable frameworks can leverage this API to provide instant, accurate updates without the need to reload the page or clear application state. Vite has HMR built into Vue.js Single File Component (SFC) and React Fast Refresh.

Composition of Vite

A development server that is based on native ES modules, provides rich built-in functions, is fast, and supports hot module updates (HMR).

A set of build instructions that uses rollup to package code, and it is preconfigured out of the box to output highly optimized static resources for production environments. At the same time, it also provides a rich plug-in API, bringing a high degree of scalability. Can be used to build vue, react and other projects.

Why choose Vite

A major advantage of Vite during development is its fast startup time. Traditional front-end development tools (such as webpack) require a lot of construction work when starting a project, including parsing modules, compiling code, packaging resources, etc. Vite takes advantage of the browser's support for native ES modules and can run the source code directly in the browser, avoiding the cumbersome construction process and achieving second-level startup time.

In addition, Vite also supports hot module replacement (HMR), which means that after the code is modified during development, the page will be updated immediately without the need for manual refresh. This greatly improves development efficiency and allows developers to see the results of modifications faster.

Installation and use of Vite

To use Vite, you first need to ensure that Node.js is installed in your development environment (it is recommended to use the latest version). Then, you can install Vite globally using the following command, we can use npm or yarn to install it. Enter the following command at the command line:

npm install -g create-vite

After the installation is complete, you can use the `create-vite` command on the command line to create a new Vite project:

Create project

create-vite my-project

Or if you leave it blank by default, a project named vite-project will be created for us. Choose a framework according to your own situation. Here I choose Vue.

This will create a new project named `vite-project` in the current directory. The directory structure is as follows

Next, follow the prompts on the command line, enter the project directory and install the dependencies, and execute the following command:

cd vite-project

npm install

Use npm to build Vite's project

Of course, you can also build a vite project by installing vite and combining it with npm. The steps and instructions are as follows:

npm install -g vite

yarn global add vite

Create a new Vite project. We can create a new project using the following command:

npm init vite-app my-project

yarn create vite-app my-project

This will create a new project called "my-project" and install all necessary dependencies in it. After the installation is complete, we can enter the project and start the development server. Similar to the steps above.

Start the development server

After the installation is complete, to start the development server, we can start the project using the following command:

cd vite-project

npm run dev

cd vite-project

yarn dev

This will start the development server and open a new window in the browser displaying our application.

This will start a development server and open the project's preview page in the browser. You can preview and debug the project in real time in the browser, and the page will update immediately after making changes in the code.

Using Vite’s Hot Update

Once we have the development server started, we can start using Vite's hot update feature to speed up our development process. This means we can immediately see the changes we made without refreshing the entire page.

For example, we can add some text to our code and see the changes immediately after saving.

<template>  <div>    <h1>My Name is SteveRocket</h1>    <p>Welcome to my <b>CTO Plus</b></p>    <img src="../assets/wechat.png"/>  </div></template>

After saving, we can see the new text immediately. This process does not require restarting the service at all. What you see is what you get directly in the browser.

Build and deploy

After development is complete, you can build the project using the following command:

npm run build

This will produce an optimized production version, including compressing the code, extracting common modules, generating file fingerprints, etc. Once the build is complete, you can deploy the generated files to your production environment.

By default, the build files generated by Vite are static and you can deploy them to any static file server. If you are using a modern browser, you can also use the pre-rendering feature provided by Vite to pre-render the page into a static HTML file to provide better performance and SEO.

Vite environment variables

Next, let's take a look at an important feature of Vite: environment variables, which allow developers to configure the behavior of applications according to different environments.

Vite's environment variables can be configured in two ways: command line parameters and `.env` files.

First, let's look at the command line parameters. When starting the Vite development server, you can use the `--env` parameter to pass environment variables. For example, `vite --env.NODE_ENV=production` will set `NODE_ENV` to `production`. Within your application, you can use `import.meta.env` to access these environment variables. For example, `import.meta.env.NODE_ENV` will return `production`.

In addition to command line parameters, you can also use `.env` files to configure environment variables. The `.env` file is a plain text file, and each line is a `key=value` key-value pair. For example, a `.env` file could have the following content:

VITE_API_URL= https://mp.weixin.qq.com/s/sw-pK1SHnqhlUd81jwEKLA

VITE_API_KEY=1234567890

Within an application, these environment variables can be accessed using `import.meta.env.VITE_API_URL` and `import.meta.env.VITE_API_KEY`.

It should be noted that `.env` files can only be used in development mode. In production mode, environment variables need to be configured on the server, for example, using server software such as Nginx or Apache.

In addition, Vite also supports the use of environment-specific configuration files such as `.env.development`, `.env.production` and `.env.local`. For example, the configuration in the `.env.development` file will only take effect in development mode, the configuration in the `.env.production` file will only take effect in production mode, and the configuration in the `.env.local` file will Overrides the same configuration in other configuration files.

import.meta.env

Vite exposes environment variables on a special import.meta.env object. Here are some built-in variables that can be used in all situations:

import.meta.env.MODE: {string} The mode in which the application runs.
import.meta.env.BASE_URL: {string} The base URL when deploying the application. It is determined by the base configuration item.
import.meta.env.PROD: {boolean} Whether the application is running in the production environment.
import.meta.env.DEV: {boolean} Whether the application is running in a development environment (always the opposite of import.meta.env.PROD).
import.meta.env.SSR: {boolean} Whether the application is running on the server.

.env file

If you change the code of the env file, you need to restart the service for it to take effect.

Vite uses dotenv to load additional environment variables from the following files in your environment directory:

.env # will be loaded in all cases

.env.local # Will be loaded in all cases, but will be ignored by git

.env.[mode] # Only load in the specified mode

.env.[mode].local # Only loaded in the specified mode, but will be ignored by git

Environment loading priority

A file that specifies a mode (e.g. .env.production) will take precedence over the generic form (e.g. .env).

In addition, environment variables that already exist when Vite is executed have the highest priority and will not be overwritten by the .env class file. For example, when running VITE_SOME_KEY=123 vite build.

The .env class file will be loaded when Vite starts, and changes will take effect after restarting the server.

The loaded environment variables will also be exposed to the client source code in the form of strings through import.meta.env.

To prevent accidentally leaking some environment variables to the client, only variables prefixed with VITE_ will be exposed to vite-processed code. For example, the following environment variables:

VITE_SOME_KEY=123

DB_PASSWORD=foobar

Only VITE_SOME_KEY will be exposed as import.meta.env.VITE_SOME_KEY to the client source code, but DB_PASSWORD will not.

console.log(import.meta.env.VITE_SOME_KEY) // 123

console.log(import.meta.env.DB_PASSWORD) // undefined

In addition, Vite uses dotenv-expand to directly expand variables. To learn more about the syntax, check out their documentation.

Note that if you want to use the $ symbol in an environment variable, you must escape it with \.

KEY=123

NEW_KEY1=test$foo   # test

NEW_KEY2=test\$foo  # test$foo

NEW_KEY3=test$KEY   # test123

If you want to customize the prefix of env variables, see envPrefix.

Safety Precautions

.env.*.local files should be local and can contain sensitive variables. You should add .local to your .gitignore to avoid them being checked in by git.
Since any variables exposed to Vite source code will eventually appear in the client package, VITE_* variables should not contain any sensitive information.

Smart Tips for TypeScript

By default, Vite provides type definitions for import.meta.env in vite/client.d.ts. As you customize more and more environment variables in the .env[mode] file, you may want to get TypeScript IntelliTips for these user-defined environment variables prefixed with VITE_ in your code.

To do this, you can create an env.d.ts file in the src directory and add the ImportMetaEnv definition as follows:

typescript

/// <reference types="vite/client" />

interface ImportMetaEnv {

  readonly VITE_APP_TITLE: string

  // More environment variables...

interface ImportMeta {

  readonly env: ImportMetaEnv

If your code depends on browser environment types, such as DOM and WebWorker, you can modify the lib field in tsconfig.json to obtain type support.

json

  "lib": ["WebWorker"]

HTML environment variable replacement

Vite also supports replacing environment variables in HTML files. Any attribute in import.meta.env can be used in HTML files via the special %ENV_NAME% syntax:

html

<h1>Vite is running in %MODE%</h1>

<p>Using data from %VITE_API_URL%</p>

If the environment variable does not exist in import.meta.env, such as %NON_EXISTENT% that does not exist, it will be ignored and not replaced. This is different from import.meta.env.NON_EXISTENT in JS, which will be replaced in JS. is undefined.

model

By default, the development server (dev command) runs in development mode, and the build command runs in production mode.

This means that when vite build is executed, it will automatically load environment variables that may be present in .env.production:

# .env.production

VITE_APP_TITLE=My App

In your app, you can use import.meta.env.VITE_APP_TITLE to render the title.

In some cases, if you want to run a different mode to render different titles when vite builds, you can override the default mode used by the command by passing the --mode option flag. For example, if you want to build your app in staging (pre-release) mode:

bash

vite build --mode staging

You also need to create a new .env.staging file:

# .env.staging

VITE_APP_TITLE=My App (staging)

Since vite build runs a production mode build by default, you can also change it to run a development mode build by using a different mode and corresponding .env file configuration:

# .env.testing

NODE_ENV=development

Vite configuration

Vite's default configuration is sufficient to meet the needs of most projects, but if you need some custom configuration, you can create a `vite.config.js` file in the project root directory and export a configuration object (I built This file is generated by the project by default). For example, you can specify the project's entry file, output directory, proxy settings, etc. You can also extend Vite's functionality by configuring plug-ins, such as adding TypeScript support, CSS preprocessors, etc.

The following is a simple `vite.config.js` configuration example:

module.exports = {
   
     // 入口文件  root: './src/main.js',  // 输出目录  build: {
   
       outDir: './dist',  },  // 代理设置  server: {
   
       proxy: {
   
         '/api': 'http://localhost:3000',    },  },};

Vite plug-in installation and configuration

Vite also provides many useful plug-ins that can help us further speed up our development process. For example, we can use Vite's plug-ins to automatically format our code, automatically complete our code, automatically detect errors in our code, and so on.

To use Vite's plugins, we can install them in our project and configure them in our configuration file. For example, to install Vite’s auto-formatting plug-in, we can use the following command:

npm install vite-plugin-prettier

yarn add vite-plugin-prettier

We can then configure the plugin in our Vite configuration file:

import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import prettier from 'vite-plugin-prettier';
export default defineConfig({
   
     plugins: [    vue(),    prettier({
   
         // options    }),  ],});

Introduction to other functions of Vite

npm dependency parsing and building

Native ES import does not support the following bare module import:

import {
   
    someMethod } from 'my-dep'

The above code will throw an error in the browser. Vite will detect such bare module imports in all loaded source files and perform the following actions:

1. Pre-building them improves page loading speed and converts CommonJS/UMD to ESM format. The pre-build step is performed by esbuild, which makes Vite's cold start time much faster than any JavaScript-based packager.

2. Rewrite the imports to legal URLs, such as /node_modules/.vite/deps/my-dep.js?v=f3sf2ebdso that the browser can import them correctly.

Dependencies are strongly cached

Vite caches requested dependencies via HTTP headers, so if you want to edit or debug a dependency, please follow the steps here.

Dependencies pre-built

When you first launch Vite, Vite pre-builds project dependencies before loading your site locally. By default, it is done automatically and transparently.

This is the "dependency pre-building" that Vite does when executing. This process serves two purposes:

CommonJS and UMD compatibility: During the development phase, Vite's development server treats all code as native ES modules. Therefore, Vite must first convert dependencies provided as CommonJS or UMD into ES modules.

When converting CommonJS dependencies, Vite performs smart import analysis so that named imports work properly even if the module's exports are dynamically allocated (e.g. React):

// In line with expectations

import React, { useState } from 'react'

Performance: To improve subsequent page loading performance, Vite converts those ESM dependencies that have many internal modules into a single module.

Some packages build their ES modules as many separate files that import each other. For example, lodash-es has over 600 built-in modules! When we execute import { debounce } from 'lodash-es', the browser issues more than 600 HTTP requests at the same time! Even if the server can handle them easily, a large number of requests can cause network congestion on the browser side, making page loading significantly slower.

By pre-building lodash-es into a single module, now we only need one HTTP request!

Notice

Dependency pre-building only works in development mode and uses esbuild to convert dependencies into ES modules. In production builds, @rollup/plugin-commonjs will be used.

file system cache

Vite caches pre-built dependencies into node_modules/.vite. It determines whether the pre-build step needs to be re-run based on several sources:

The contents of the package manager’s lock file, such as package-lock.json, yarn.lock, pnpm-lock.yaml, or bun.lockb;
The modification time of the patch folder;
Relevant fields in vite.config.js;
The value of NODE_ENV.

You only need to rerun the prebuild if one of the above changes.

If for some reason you want to force Vite to rebuild dependencies, you can specify the --force option when starting the development server, or manually delete the node_modules/.vite cache directory.

browser cache

Prebuilt dependency requests use the HTTP header max-age=31536000, immutable for strong caching to improve page reload performance during development. Once cached, these requests will never hit the development server again. If different versions of a dependency are installed (this is reflected in the package manager's lockfile), querying by additional versions will automatically fail. If you want to debug dependencies by editing them locally, you can:

Temporarily disable caching through the Network tab of your browser's developer tools;
Restart the Vite development server and specify the --force option to rebuild dependencies;
Reload the page.

TypeScript

Vite naturally supports importing .ts files.

Please note that Vite only performs translation of .ts files and does not perform any type checking. And assume that type checking is already handled by your IDE or build process. So how to enable type checking?

The reason Vite doesn't include type checking as part of the conversion process is because the two tasks are inherently different. Translation can be performed on a per-file basis, fully consistent with Vite's on-demand compilation model. In contrast, type checking requires knowledge of the entire module graph. Jamming type checking into Vite's conversion pipeline will inevitably undermine Vite's speed advantage.

Vite's job is to convert source modules into a form that can be run in the browser as quickly as possible. To do this, we recommend separating static analysis checks from Vite's conversion pipeline. This principle also applies to other static analysis checks, such as ESLint.

When building a production build, you can run it outside of Vite's build command tsc --noEmit.
When developing, if you need more IDE prompts, we recommend running in a separate process tsc --noEmit --watch, or if you like to see reported type errors directly in the browser, you can use vite-plugin-checker.

Vite uses esbuild to translate TypeScript into JavaScript, which is about tsc20 to 30 times faster. At the same time, the time for HMR updates to be reflected in the browser is less than 50ms.

Using type-only import and export syntax can avoid the potential problem of "type-only imports being incorrectly packaged". An example of how to write it is as follows:

import type {
   
    T } from 'only/types'

export type {
   
    T }

client type

Vite's default type definitions are written for its Node.js API. To supplement this into a Vite application's client code environment, add a d.ts declaration file:

/// <reference types="vite/client" />

Alternatively, you can add vite/client to compilerOptions.types in tsconfig.json:

{
   
     "compilerOptions": {
   
       "types": ["vite/client"]  }}

This will provide the following type definition additions:

Resource import (for example: import a .svgfile)
import.meta.envType definition of environment variables injected by Vite
import.meta.hotHMR API type definition on

TIP

To override the default type definition, please add a file containing your defined type, please add the definition before the triple slash comment reference vite/client.

For example, to define a type for *.svg files in a React component:

vite-env-override.d.ts (the file that contains your typings):

· ts

declare module '*.svg' {

  const content: React.FC<React.SVGProps<SVGElement>>

  export default content

}

· The file containing the reference to vite/client:

/// <reference types="./vite-env-override.d.ts" />

/// <reference types="vite/client" />

CSS

Importing the .css file will insert the content into the <style> tag, with HMR support as well. It is also possible to retrieve the processed CSS exported by default for its module as a string.

Path import supports the use of @import, eg: @import './base.css';
Support CSS Modules usage, please refer to

Any CSS file .module.csswith a suffix is considered a CSS modules file. Importing such a file returns a corresponding module object:

/* example.module.css */

.red {

color: red;

}

import classes from './example.module.css'

document.getElementById('foo').className = classes.red

CSS modules behavior can css.modulesbe configured through options.

If css.modules.localsConventionyour settings enable camelCase format variable name conversion (for example localsConvention: 'camelCaseOnly'), you can also use import by name.

// .apply-color -> applyColor

import { applyColor } from './example.module.css'

document.getElementById('foo').className = applyColor

Support css preprocessor

Since Vite targets only modern browsers, it is recommended to write simple, future-proof CSS using native CSS variables and PostCSS plugins that implement CSSWG drafts (such as postcss-nesting). Having said that, Vite also provides built-in support for .scss, .sass, .less, .styl and .stylus files. There is no need to install specific Vite plugins for them, but the corresponding preprocessor dependencies must be installed:

# .scss and .sass

npm add -D sass

# .less

npm add -D less

# .styl and .stylus

npm add -D stylus

In addition, the following configuration needs to be added to vite.config.ts:

  css: {
   
         // css预处理器      preprocessorOptions: {
   
           scss: {
   
             additionalData: '@import "@/assets/style/mixin.scss";@import "@/assets/style/variable.scss";' //引入全局scss样式        }      }    }

You can also use CSS modules with a preprocessor by prepending .module to the file extension, such as style.module.scss. (This has been used in react projects)

Disable CSS injection into the page

Automatic injection of CSS content can be turned off with the ?inline parameter. When closed, the processed CSS string will be used as the module's default export, but the style will not be injected into the page.

import './foo.css' // Style will be injected into the page

import otherStyles from './bar.css?inline' //Styles will not be injected into the page

Notice

As of Vite 4, default import and import by name of CSS files (e.g. import style from './foo.css') are deprecated. Please use the ?inline parameter instead.

Static resource processing

How to introduce static resources

import imgUrl from './img.png'

document.getElementById('hero-img').src = imgUrl

For example, imgUrl would be /img.png during development and /assets/img.2d8efhg.png after a production build.

Behavior is similar to Webpack's file-loader. The difference is that the import can use either an absolute public path (based on the project root path during development) or a relative path.

url() references in CSS are handled the same way.
If Vite uses the Vue plug-in, resource references in the Vue SFC template will be automatically converted to imports.
Common image, media, and font file types are automatically detected as resources. You can extend the internal list using the assetsInclude option.
Referenced resources are included as part of building the resource graph, a hashed file name will be generated and can be processed by the plugin for optimization.
Smaller resources smaller than the assetsInlineLimit option value will be inlined into base64 data URLs.
By default, TypeScript does not treat static resource imports as valid modules. To solve this problem, vite/client needs to be added. (Use vue scaffolding to initialize the project, these will be configured for you)
Git LFS placeholders are automatically excluded from inlining because they do not contain the contents of the file they represent. To get inline, make sure to download the file contents via Git LFS before building.
public directory

If you have the following resources:

Will not be referenced by source code (for example robots.txt)
The original file name must be maintained (not hashed)
...or you don't want to import the resource at all, just get its URL.

Then you can place the resource in the specified public directory, which should be located in your project root directory. The resources in this directory can be directly accessed through the / root path during development, and will be completely copied to the root directory of the target directory during packaging.

The directory defaults to <root>/public, but can be configured via the publicDir option.

Please note:

Resources imported into publicshould always use the root absolute path - for example, public/icon.pngshould be referenced as in the source code /icon.png.
publicResources in should not be referenced by JavaScript files.

new URL(url, import.meta.url)

import.meta.url is a native function of ESM that exposes the URL of the current module. Combining it with the native URL constructor, in a JavaScript module, we can get a fully parsed static resource URL through a relative path:

const imgUrl = new URL('./img.png', import.meta.url).href

document.getElementById('hero-img').src = imgUrl

This works natively in modern browsers - in fact, Vite doesn't need to deal with this code during development! This mode also supports dynamic URLs via string templates:

function getImageUrl(name) {

return new URL(`./dir/${name}.png`, import.meta.url).href

}

During production builds, Vite will perform the necessary transformations to ensure that the URL still points to the correct address after packaging and resource hashing. However, this URL string must be static in order to be easily analyzed. Otherwise the code will be left intact, resulting in a runtime error if the build.target does not support import.meta.url.

// Vite will not convert this

const imgUrl = new URL(imagePath, import.meta.url).href

Example:

<body>  <img id="imgbox"></img>  <script type="module">      // 在原生方式直接这样引用不行呢，需要使用new URL 结合import.meta.url的方式      // import imgUrl from './straw.jpg'      // import.meta是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的 URL。      // 注意：1.js的type类型需是module 2.返回的地址是绝对路径      console.log('import.meta',import.meta)      //new URL() 创建并返回一个URL对象，该 URL 对象引用使用绝对 URL 字符串，相对 URL 字符串和基本 URL 字符串指定的 URL。      // 如果url参数是相对 URL，则构造函数将使用url参数和可选的base参数作为基础。      const url = new URL('./straw.jpg',import.meta.url).href      document.getElementById('imgbox').src = url      // document.getElementById('imgbox').src = imgUrl</script></body>

NOTE: Not available in SSR

If you are using Vite in server-side rendering mode this mode is not supported because import.meta.url has different semantics in browsers and Node.js. Server-side products also cannot predetermine the client host URL.

Summarize

All in all, Vite is a very useful tool that can greatly speed up the development of our web applications. Its fast boot time and hot update capabilities allow developers to test and debug their code faster. In addition, Vite also provides many useful plug-ins that can help us further accelerate our development process. If you're looking for a fast and powerful build tool, Vite is definitely worth a try.

Finally, I hope this article will help you understand and use Vite tools!

Reference link

Github address: https://github.com/vitejs/vite.git

import.meta.url

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta

assetsinlinelimit option

https://cn.vitejs.dev/config/build-options.html#build-assetsinlinelimit

assetsinclude option

https://cn.vitejs.dev/config/shared-options.html#assetsinclude

quickly/customer

https://cn.vitejs.dev/guide/features.html#client-types

URL constructor

https://developer.mozilla.org/en-US/docs/Web/API/URL

CSS modules

https://github.com/css-modules/css-modules

Big front-end column
https://blog.csdn.net/zhouruifu2015/category_5734911 https://blog.csdn.net/zhouruifu2015/category_5734911 Node.js column

https://blog.csdn.net/zhouruifu2015/category_5728369.htmlhttps://blog.csdn.net/zhouruifu2015/category_5728369.html

More information· Search [CTO Plus] on the WeChat public account and follow it to get more information. Let’s learn and communicate together.

For a description of the public account, visit the following link

About Articulate "Be a porter of knowledge and technology. Be a lifelong learning enthusiast. Be a technical circle with depth and breadth." I have always wanted to develop skills in the professional field https://mp.weixin.qq. com/s/0yqGBPbOI6QxHqK17WxU8Q