vite のデフォルトの構成ファイルはvite.config.jsで、最も基本的な構成ファイルの形式は次のとおりです。
export default {
// 配置选项
};
–configコマンド ライン オプション、コマンド ライン入力で構成ファイルを指定することもできます: vite --config my-config.js
Vite はノード環境で動作しますが、なぜ vite.config.js を esmodule の形式で記述できるのですか? vite がvite.config.js
を読み取ると、node を介してファイルの構文を解析し、esmodule 仕様であることが判明すると、esmodule 仕様を commonjs 仕様に直接置き換えます。
構文のヒントを構成する
vscode コンパイラを使用して vite 構成を追加すると、コンパイラはヒントを提供しません。これは私たちにとって非常に不親切です!
(下図のプロンプトは、vite のオプションの構成プロンプトではなく、プラグインによる js の一般的なプロンプトです)
- webstorm には優れた文法補完機能がありますが、vscode にはありません
- vscode またはその他のエディターを使用する場合、コンパイラーにインテリジェントなプロンプトを提供させたい場合は、特別な処理を行う必要があります。
次の 2 つの構成により、コード補完機能を取得できます。
defineConfig
defineConfig の追加により、構成項目のコード プロンプトがあることに驚くことでしょう。これは非常に便利です。
jsdoc コメント メソッド
jsDoc は、JavaScript の API ドキュメント ジェネレーターです。公式 Web サイト: https://jsdoc.zcopy.site/
viteConfig に構成を記述してエクスポートし、次のコメントを記述します。
/** @type import("vite").UserConfig */
環境モード構成
webpack の時代には、開発者は通常、webpack.dev.config、webpack.prod.config、webpack.base.configなど、さまざまな環境に基づいてさまざまな構成ファイルを設定します。
実際、さまざまな環境に基づいてさまざまな構成を設定するには、そのような関数をエクスポートするだけで済みます。
export default defineConfig(({
command, mode, ssrBuild }) => {
if (command === 'serve') {
return {
// dev 独有配置
}
} else {
// command === 'build'
return {
// build 独有配置
}
}
})
- 開発環境では、command の値はserve です。
- 本番環境では、コマンドの値はビルドです
マルチ環境構成統合の実装
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() メソッドは、列挙可能なすべてのプロパティを 1 つ以上のソース オブジェクトからターゲット オブジェクトにコピーし、変更されたオブジェクトを返します。
注: このメソッドはソース オブジェクトを変更します。
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
