This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

An overview of the

Let’s start with Vite.

Before Vite, the front end was used to using packaging tools like Webpack, Parcel, rollup, and so on to string our source code modules together into files that would run in the browser. But as applications get bigger and more logically complex, packaging times get slower and slower.

However, with the rapid development of modern browsers, tools such as Snowpack and Vite have taken advantage of the ESM features of modern browsers, enabling front-end development to move away from the “packaging” step and enabling the new era of Nobundle.

This article assumes that the reader has an understanding of the basic usage of Vite and esM-related concepts. The next few articles will take a closer look at how Vite works from the source level.

The project architecture

Vite uses yarn Workspace to manage the Vite official ecological library. It contains core libraries vite, create-app, create-vite, and official plug-ins such as plugin-vue and plugin-react-refresh.

The overall project structure is as follows:

- packages
    - create-app [deprecated]
    - create-vite
    - playground [demos]
    - plugin-legacy
    - plugin-react-refresh
    - plugin-vue
    - plugin-vue-jsx
    - vite
Copy the code

Since Vite is developed in Typescript, this series of analyses provides an overview of the implementation and Typescript features involved to help you understand how open source libraries work and how code is organized.

packages/vite

Let’s take a look at the code architecture under Packages/Vite:

- packages
  - vite
    - src
      - client
      - node
Copy the code

Since the native ESM can’t handle resources with absolute paths like import Vue from ‘Vue’, some nobundle library implementations start a development server, They will amend the vue to. / node_modules/vue/dist/index. The js similar reference, so as to solve the native ESM cannot solve some problems.

Therefore, vite contains both client and Node server code.

Check out the official documentation for a description of vite’s features.

  • A development server that provides rich built-in features based on native ES modules, such as surprisingly fast module hot update (HMR).
  • A set of build instructions that use Rollup to package your code and that are pre-configured to output highly optimized static resources for production.

The code and principles involved in client and Node will be described in subsequent articles.

packages/create-vite

This library is used to initialize Vite projects, allowing rapid development scaffolding to be generated using Vite to integrate with frameworks such as Vue, React, Preact, Svelte, etc.

packages/plugin-legacy

Plug-ins for browsers that do not support Native ESM.

packages/plugin-react-refresh

React Refresh functionality is provided for the JSX feature during development.

packages/plugin-vue

Vue customization features are supported.

packages/plugin-vue-jsx

Provide HMR support for JSX and TSX writing of Vue3.

summary

Through the above introduction, I believe you have a comprehensive understanding of Vite warehouse.

Later articles will delve into what specific functionality each package does and what features it implements.