What is the Vite

Vite is a new front-end build tool that dramatically improves the front-end development experience. It mainly consists of two parts:

  • 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.

Vite is intended to provide out-of-the-box configuration, while its plug-in API and JavaScript API provide a high degree of extensibility and complete type support.

Why use Vite

Vite’s out-of-the-box configuration is a relief, eliminating the need for complex WebPack and Babel configuration processes, native support for TypeScript packaging, debugging of projects in seconds, no need to embrace ES Module packaging and support real-time hot updates.

Perhaps some people say not by a lot of ready-made scaffolding can be used directly. The Vue3 and React projects have good Vite based scaffolding tools so far, but I was faced with a less popular scaffolding migration of Web frameworks.

Create OMI scaffolding using Vite

What is the OMI

OMI- Front-end [Cross-frame] framework can not only enable front-end ecology in the form of Web Components custom tags, such as React, Vue and Preact, but also accelerate front-end development of Web and small programs by itself.

OMI can be said to be a development framework that can use JSX + WebComponent. I also learned a lot from the surrounding ecological development of OMI, including a lot of knowledge on source code and framework design. I also communicated with major contributors for many times, which was a practice of trying to join the open source community.

Try using omi-Vite scaffolding

Install and initialize the project

npm install -g omi-cli
omi init-vit my-app
Copy the code

Based on Vite development configuration OMI scaffolding

The main function of scaffolding is to (handle user command line input, pull project templates, and some automation scripts)

As a new front-end building tool, Vite is not only suitable for the Vue ecosystem, but also supports many templates. Such as (Vue, react, preact, lit – element, svelte)

1. Initialize the project template using Vite

npm init @vitejs/app
Copy the code

Vanilla – TS (native TypeScript project)

Press Enter to initialize the Vite project

2. Configure the OMI development environment

Install the OMI

npm install omi
Copy the code

Installation development dependency

Vite supports a wide range of mainstream CSS preprocessors and only requires installation that relies on zero configuration out of the box

# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus
Copy the code

Vite also supports PostCSS, and if the project contains a valid PostCSS configuration (any format supported by PostCSs-load-config, such as postcss.config.js), it will automatically apply to all imported CSS.

The Vite native supports a wide variety of file types to read and pack, without having to configure various loaders like WebPack. Vite can be extended using plug-ins, thanks to Rollup’s excellent plug-in interface design and some additional options unique to Vite. This means that Vite users can take advantage of the Rollup plugin’s powerful ecosystem, while also being able to extend development server and SSR functionality as needed.

Try to write a demo

//packages/omi-cli/template/vite/src/main.tsx

import { WeElement, h, tag, render, } from 'omi'

interface HelloProps {
  name: string
}

@tag('hello-omi')
export default class extends WeElement<HelloProps> {

  render(props) {
    return (
      <div>Hello{props.name}</div>
		)
  }
}

render(<my-app name = 'Omi' > </hello-omi>.'#root')
Copy the code

3. Configure Vite. Config. Js

Write the Demo and run it

It worked, just when I thought everything was okay

JSX and.tsx files are also used out of the box after checking the official documentation. JSX is also translated via ESBuild, which defaults to React 16. Therefore, JSX parsing in OMI was not performed, and the configuration needs to be modified in viet.config.js

So a copy of the interface design due to a consistent Ctrl CV fierce as a tiger

export default {
  esbuild: {
    jsxFactory: 'h'.jsxFragment: 'Fragment'}}Copy the code

At this point, the whole project can run normally

Now I’m just going to finish the DEMO.

Yes, Vite is that easy to use, with no more than ten lines of configuration.

Library packaging using Vite (Rollup)

Vite uses Rollup to package projects. Rollup packages are smaller and more readable than WebPack. It can be seen that building tools of frameworks like React and Vue use Rollup to package projects. There’s no reason not to use Vite.

webpack rollup
Development mode size 52.8 KB 19.46 KB
Production package size 10.3 KB 7.66 KB
Production package size after gzip 4.1 KB 3.4 KB

Vite is also configured for application packaging in advance, but this time we are trying library files, so we need to make some configuration changes

The build process can be customized through a variety of build configuration options, which can be configured through the Build option in viet.config.js

const path = require('path')

module.exports = {
  build: {
    lib: {
      entry: path.resolve(__dirname, 'lib/index.ts'),
      name: 'cnmLib'}}},Copy the code

This is officially recommended for package.json in your own library

{
  "name": "my-lib"."files": ["dist"]."main": "./dist/my-lib.umd.js"."module": "./dist/my-lib.es.js"."exports": {
    ".": {
      "import": "./dist/my-lib.es.js"."require": "./dist/my-lib.umd.js"}}}Copy the code

Use the build.lib configuration when building your library for publishing. Be sure to externalize dependencies that you don’t want packaged into your library, such as vue or react:

// vite.config.js
const path = require('path')

module.exports = {
  build: {
    lib: {
      entry: path.resolve(__dirname, 'lib/main.js'),
      name: 'MyLib'
    },
    rollupOptions: {
      Be sure to externalize those dependencies that are not needed in your library
      external: ['vue'].output: {
        Provide a global variable for these externalized dependencies in UMD build mode
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
}
Copy the code

Running a Vite build with the above configuration will use a Rollup preset that provides two build formats for publishing the library: ES and UMD (configured in build.lib) :

$ vite build
building for production...
[write] my-lib.es.js 0.08kb, brotli: 0.07kb
[write] my-lib.umd.js 0.30kb, brotli: 0.16kb
Copy the code

You can also customize the rollup configuration through the underlying rollup configuration file, and directly adjust the rollup options through build.rollupOptions:

Write a rollup. Config. Js

//rollup.config.js
export default RollupConfig = {
    input: 'src/lib/index.ts'.output: {
        name: 'core'.file: 'dist/lib/core.js'.format: 'umd',},plugins: [],}Copy the code

Vite. Config. Introduced in js

import rollupConfig from './rollup.config'

module.exports = {
  build: {
    rollupOptions: rollupConfig
  }
}
Copy the code

Rollup.config. js needs to be configured based on project requirements

conclusion

As the wheel of history rolls forward, there has never been a silver bullet in the field of programming. It is an eternal truth to embrace change and make a case-by-case analysis to choose the right solution for your project.

This paper only records some practices in my trial and learning process, which may not be very suitable for large-scale projects. The so-called bold assumptions and careful verification are also suitable for this.