【vite·4】vite在多环境下的配置集成方案及defineConfig(非常详细)

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的通用提示)
【vite·4】vite在多环境下的配置集成方案及defineConfig(非常详细)_第1张图片

  • webstorm有很好的语法补全功能,vscode没有
  • 如果使用vscode或者其他的编辑器, 想要编译器进行智能提示,需要做一些特殊处理

通过下面的两种配置,我们可以获得代码补全功能。

defineConfig

加上defineConfig,会惊奇的发现,配置项居然有代码提示了,真香!
【vite·4】vite在多环境下的配置集成方案及defineConfig(非常详细)_第2张图片

jsdoc 注释法

jsDoc是一个用于JavaScript的API文档生成器,官网:https://jsdoc.zcopy.site/

将配置写在viteConfig内并导出,然后再其上面写如下注释:

/** @type import("vite").UserConfig  */

【vite·4】vite在多环境下的配置集成方案及defineConfig(非常详细)_第3张图片

环境模式配置

webpack时代,基于不同的环境,开发者通常会设置不同的配置文件,如:webpack.dev.configwebpack.prod.configwebpack.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中引入使用
【vite·4】vite在多环境下的配置集成方案及defineConfig(非常详细)_第4张图片

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
【vite·4】vite在多环境下的配置集成方案及defineConfig(非常详细)_第5张图片

你可能感兴趣的:(vite,javascript,webpack,前端)