【vite·4】vite在多环境下的配置集成方案及defineConfig(非常详细)
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
vite的默认配置文件是vite.config.js最基础的配置文件格式如下
export default {
// 配置选项
};
我们也可以通过 –config 命令行选项指定一个配置文件命令行输入 vite --config my-config.js
vite运行在node环境为什么vite.config.js能够写成esmodule的形式
vite在读取vite.config.js时会率先通过node解析文件语法, 如果发现你是esmodule规范会直接将你的esmodule规范进行替换变成commonjs规范
配置语法提示
我们采用vscode编译器增添vite配置时编译器是没有任何提示的这对我们很不友好
下图的提示并不是vite的可选配置提示是插件对js的通用提示
- webstorm有很好的语法补全功能vscode没有
- 如果使用vscode或者其他的编辑器, 想要编译器进行智能提示需要做一些特殊处理
通过下面的两种配置我们可以获得代码补全功能。
defineConfig
加上defineConfig会惊奇的发现配置项居然有代码提示了真香
jsdoc 注释法
jsDoc是一个用于JavaScript的API文档生成器官网https://jsdoc.zcopy.site/
将配置写在viteConfig内并导出然后再其上面写如下注释
/** @type import("vite").UserConfig */
环境模式配置
webpack时代基于不同的环境开发者通常会设置不同的配置文件如webpack.dev.config、webpack.prod.config、webpack.base.config 等等。
vite中基于不同环境设置不同配置只需要导出这样一个函数
export default defineConfig(({ command, mode, ssrBuild }) => {
if (command === 'serve') {
return {
// dev 独有配置
}
} else {
// command === 'build'
return {
// build 独有配置
}
}
})
- 在开发环境下 command 的值为 serve
- 生产环境下为 command 的值为 build
多环境配置集成的一种实现方式
同webapack配置一样我们也可以定义多个配置文件然后再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
};
}
});
vite.base.config.js代码如下其余类似。
import { defineConfig } from "vite";
export default defineConfig( {
});
多环境配置集成的策略模式写法
我们可以使用策略模式让代码变得更加高级
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()
Object.assign() 方法将所有可枚举属性从一个或多个源对象复制到目标对象返回修改后的对象。
注意该方法会修改源对象
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
多环境配置测试
我们在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]();
});
package.json中增加"build": “vite build”
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "vite",
"build": "vite build"
},
命令行执行 npm run dev
命令行执行 npm run build
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |