The default configuration file of vite is vite.config.js , the most basic configuration file format is as follows:
export default {
// 配置选项
};
We can also specify a configuration file through the –config command line option, command line input: vite --config my-config.js
Vite runs in the node environment, why can vite.config.js be written in the form of esmodule?
When vite reads vite.config.js , it will take the lead in parsing the file syntax through node. If it finds that you are an esmodule specification, it will directly replace your esmodule specification with a commonjs specification.
Configure syntax hints
When we use the vscode compiler to add the vite configuration, the compiler does not give any hints, which is very unfriendly to us!
(The prompt in the figure below is not an optional configuration prompt for vite, but a general prompt for js by the plugin)
- webstorm has a good grammar completion function, vscode does not
- If you use vscode or other editors, you need to do some special processing if you want the compiler to provide intelligent prompts
Through the following two configurations, we can get the code completion function.
defineConfig
With the addition of defineConfig, you will be surprised to find that there are code prompts for the configuration items, which is really delicious!
jsdoc comment method
jsDoc is an API documentation generator for JavaScript, official website: https://jsdoc.zcopy.site/
Write the configuration in viteConfig and export it, and then write the following comment on it:
/** @type import("vite").UserConfig */
Environment mode configuration
In the era of webpack, developers usually set different configuration files based on different environments, such as: webpack.dev.config , webpack.prod.config , webpack.base.config, etc.
In vite, to set different configurations based on different environments, you only need to export such a function:
export default defineConfig(({
command, mode, ssrBuild }) => {
if (command === 'serve') {
return {
// dev 独有配置
}
} else {
// command === 'build'
return {
// build 独有配置
}
}
})
- In the development environment, the value of command is serve
- In the production environment, the value of command is build
An Implementation of Multi-Environment Configuration Integration
Like the webapack configuration, we can also define multiple configuration files, and then import and use them in vite.config.js
import {
defineConfig } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import viteProdConfig from "./vite.prod.config";
export default defineConfig(({
command, mode, ssrBuild }) => {
if (command === "serve") {
return {
// dev 独有配置
...viteBaseConfig,
...viteProdConfig
};
} else {
// command === 'build'
return {
// build 独有配置
...viteBaseConfig,
...viteDevConfig
};
}
});
The vite.base.config.js code is as follows, and the rest are similar.
import {
defineConfig } from "vite";
export default defineConfig( {
});
Strategy pattern writing method for multi-environment configuration integration
We can use the strategy pattern to make the code more advanced
import {
defineConfig } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import viteProdConfig from "./vite.prod.config";
const envResolver = {
// build: () => ({...viteBaseConfig,... viteProdConfig}) 这种方式也可以
// Object.assign中的{}是为了防止viteBaseConfig被修改。
build: () => Object.assign({
}, viteBaseConfig, viteProdConfig),
serve: () => Object.assign({
}, viteBaseConfig, viteDevConfig),
};
export default defineConfig(({
command, mode, ssrBuild }) => {
return envResolver[command]();
});
Object.assign()
The Object.assign() method copies all enumerable properties from one or more source objects to a target object, returning the modified object.
Note: This method modifies the source object!
const target = {
a: 1, b: 2 };
const source = {
b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget === target);
// expected output: true
Multi-environment configuration testing
We write prompt information according to different environments in vite.config.js
import {
defineConfig } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import viteProdConfig from "./vite.prod.config";
const envResolver = {
build: () => {
console.log("生产模式");
Object.assign({
}, viteBaseConfig, viteProdConfig)
},
serve: () => {
console.log("开发模式");
Object.assign({
}, viteBaseConfig, viteDevConfig)
},
};
export default defineConfig(({
command, mode, ssrBuild }) => {
return envResolver[command]();
});
Add "build": "vite build" to package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "vite",
"build": "vite build"
},
Command line execution npm run dev
command line execution npm run build
