SWAT Vite

Provides ready to use Vite dependencies and configurations.

Configuration

Vite can be configured in basic or advanced modes, or a combination of both. In most cases, adding the following to the project root vite.config.js is enough to get started. It uses the recommended default configuration provided by this package.

import { setConfig } from '@imagexmedia/vite'

export default setConfig()

Basic mode

The first parameter in setConfig() accepts an object of options provided by this package.

Option: aliases

Define aliases used to replace values in import or require statements.

export default setConfig({
  aliases: {
    // @see https://vite.dev/config/shared-options#resolve-alias
    '@example': path.resolve(process.cwd(), 'src/example'),
  }
})

Option: plugins.image

An anonymous function to override the image optimizer base configuration. The config parameter is the mutable image optimizer base configuration object that can be modified and returned. By default, only .svg files are optimized. Using an svgo.config.js file is not supported, so make those changes in the config.svg object.

export default setConfig({
  plugins: {
    image: (config) => {
      // @see https://github.com/FatehAK/vite-plugin-image-optimizer
      config.exclude = /fa-.*\.svg$/i
      // @see https://svgo.dev/docs/plugins/
      config.svg.multipass = false

      return config
    },
  },
})

Advanced mode

The second parameter in setConfig() accepts an anonymous function that returns a Vite configuration object. The env parameter is for defining Conditional Config. The config parameter is the mutable Vite base configuration object that can be modified and returned.

export default setConfig({}, (env, config) => {
  if (env.mode === 'dev') {
    config.logLevel = 'info'
  }

  return config
})

Workspace overrides

By default, all workspaces use the project root vite.config.js file. By placing a vite.config.js file in the workspace, next to package.json, the workspace now uses its own separate configuration. The workspace can be configured in the same way as the project root or be something completely different.

[workspace_name]/
├── package.json
└── vite.config.js

Structure

The default configuration looks for entry points in two ways to allow some flexibility. First, it looks for valid entry points in the top-level workspace src/* folder. Second, it looks in the first-level subdirectories of the src/*/* folder. When it finds entry points in the top-level folder, it does not consider first-level subdirectories as containing additional entry points. Valid entry point file extensions include:

js ts jsx tsx cjs cts mjs mts css scss

Example 1 (recommended)

The recommended workspace structure for most components. Note that both example1.ts and example2.ts are treated as separate entry points with their own public/js/ output. The files in the scripts/ folder are not treated as entry points because they exist beyond the first-level subdirectory and must be imported in one of the entry points.

[workspace_name]/
├── public/
│   ├── css/
│   │   └── example.css
│   └── js/
│       ├── example1.js
│       └── example2.js
├── src/
│   ├── js/
│   │   ├── scripts/
│   │   │   └── extra.ts
│   │   ├── example1.ts (entry point)
│   │   └── example2.ts (entry point)
│   └── scss/
│       ├── scripts/
│       │   └── _extra.scss
│       └── example.scss (entry point)
└── package.json

Example 2 (simplified)

When a workspace includes only one or two files, the structure can be simplified. In this example, the SCSS file is treated as an entry point rather than having a second JavaScript file that imports the SCSS, which prevents the output from generating an empty JavaScript file just to compile CSS.

[workspace_name]/
├── public/
│   └── css/
│       └── example.css
├── src/
│   └── example.scss (entry point)
└── package.json

Example 3 (static assets)

The workspace static/ folder may contain additional static assets of any file type, and they will be copied directly into the public/ folder. Place them inside static/assets/ to have them copied to the public/assets/ folder. An SVG spritemap will auto-generate at public/assets/icons-sprite.svg when src/icons/ contains SVG files. SVGO optimizations are applied by default to any output SVG file, including the SVG spritemap and SVGs copied from the static/ folder.

[workspace_name]/
├── public/
│   ├── assets/
│   │   ├── example.svg
│   │   └── icons-sprite.svg
│   └── css/
│       └── example.css
├── src/
│   ├── icons/ (compiles to icons-sprite.svg)
│   │   ├── icon1.svg
│   │   └── icon2.svg
│   └── example.scss (entry point)
├── static/
│   └── assets/
│       └── example.svg
└── package.json

Additional resources

• https://docs.npmjs.com/cli/v7/using-npm/workspaces
• https://vite.dev/config/
• https://rolldown.rs/reference/