Vite

Vite is still my favorite bundling tool. The out-of-box features, save a lot of time for developer.

There are some situation where I would choose vite:

• For front-end project, such as involving .vue files.
• Require some custom plugin configurations, and don't want configure from scratch.
• The outputs are browser-friendly, for example, support umd bundling.
• Starting a server easily.

With esbuild

Vite use esbuild to transform files

Plugin API

transform

This is a very commonly used hook for transforming the contents of files.

import { Plugin } from 'vite'
export default function myPlugin(): Plugin {
    return {
        name: 'transform-file',
        /**
         * @params code - code for each file
         * @params id - absolute path
         */
        transform(code, id) {
            // ...
        },
    }
}

We can transform source code in this plugin. Give two examples:

1. unplugin/unplugin-auto-import: Auto-completion of missing imports in files:

unplugin/unplugin-auto-import/src/core/unplugin.ts

Lines 15 to 17 #196055b

15

16

17

    async transform(code, id) {
      return ctx.transform(code, id)
    },

1. timyourivh/vite-plugin-json5: transform the json5 that can't be resolved in javascript:

timyourivh/vite-plugin-json5/src/index.ts

Lines 9 to 17 #f824327

9

10

11

12

13

14

15

16

17

    async transform (code: string, id: string) {
      if (fileRegex.test(id)) {
        return {
          code: `const data = ${JSON.stringify(JSON5.parse(code))};\nexport default data;`,
          map: { mappings: '' }
        }
      }
      return null;
    }

enforce

The enforce control when the plugin is executed

import { Plugin } from 'vite'
export default function myPlugin(): Plugin {
    return {
        name: 'transform-file',
        enforce: 'pre', // default: 'post'
        transform(code, id, options) {
            // when enforce is pre, the TS syntax will be preserved in code
            // when enforce is post，it will be removed by vite's built-in plugins.
        },
    }
}