From d743e6baf0e4a8db10b8808ca7571ed9b62ee3da Mon Sep 17 00:00:00 2001 From: bluwy Date: Wed, 23 Nov 2022 14:51:17 +0800 Subject: [PATCH 1/5] fix(config): support development build --- docs/guide/env-and-mode.md | 6 +++--- packages/vite/src/node/config.ts | 15 +++++++-------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/docs/guide/env-and-mode.md b/docs/guide/env-and-mode.md index 8c14e9d476fdcb..b995373105105d 100644 --- a/docs/guide/env-and-mode.md +++ b/docs/guide/env-and-mode.md @@ -120,7 +120,7 @@ VITE_APP_TITLE=My App In your app, you can render the title using `import.meta.env.VITE_APP_TITLE`. -However, it is important to understand that **mode** is a wider concept than just development vs. production. A typical example is you may want to have a "staging" mode where it should have production-like behavior, but with slightly different env variables from production. +However, it is important to understand that **mode** is a wider concept than just development vs. production. A typical example is you may want to build in a "staging" mode where it should have development-like behavior and with slightly different env variables from production. You can overwrite the default mode used for a command by passing the `--mode` option flag. For example, if you want to build your app for our hypothetical staging mode: @@ -132,8 +132,8 @@ And to get the behavior we want, we need a `.env.staging` file: ``` # .env.staging -NODE_ENV=production +NODE_ENV=development VITE_APP_TITLE=My App (staging) ``` -Now your staging app should have production-like behavior, but display a different title from production. +Now your staging app should have development-like behavior, and display a different title from production. diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 2a269090f88c1f..47bff736545795 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -378,10 +378,11 @@ export async function resolveConfig( let config = inlineConfig let configFileDependencies: string[] = [] let mode = inlineConfig.mode || defaultMode + const isNodeEnvSet = !!process.env.NODE_ENV // some dependencies e.g. @vue/compiler-* relies on NODE_ENV for getting // production-specific behavior, so set it early on - if (!process.env.NODE_ENV) { + if (!isNodeEnvSet) { process.env.NODE_ENV = defaultNodeEnv } @@ -494,16 +495,14 @@ export async function resolveConfig( loadEnv(mode, envDir, resolveEnvPrefix(config)) // Note it is possible for user to have a custom mode, e.g. `staging` where - // production-like behavior is expected. This is indicated by NODE_ENV=production + // development-like behavior is expected. This is indicated by NODE_ENV=development // loaded from `.staging.env` and set by us as VITE_USER_NODE_ENV - const isProduction = - (process.env.NODE_ENV || process.env.VITE_USER_NODE_ENV || mode) === - 'production' - if (isProduction) { - // in case default mode was not production and is overwritten - process.env.NODE_ENV = 'production' + if (!isNodeEnvSet && process.env.VITE_USER_NODE_ENV === 'development') { + process.env.NODE_ENV = 'development' } + const isProduction = process.env.NODE_ENV === 'production' + // resolve public base url const isBuild = command === 'build' const relativeBaseShortcut = config.base === '' || config.base === './' From 3ca1e9aef281e08466a60091b07a4d0098cf9bb0 Mon Sep 17 00:00:00 2001 From: bluwy Date: Wed, 23 Nov 2022 14:59:49 +0800 Subject: [PATCH 2/5] chore: update test --- packages/vite/src/node/__tests__/env.spec.ts | 4 +--- packages/vite/src/node/__tests__/env/.env.development | 1 - playground/react-env/.env.staging | 1 - 3 files changed, 1 insertion(+), 5 deletions(-) delete mode 100644 playground/react-env/.env.staging diff --git a/packages/vite/src/node/__tests__/env.spec.ts b/packages/vite/src/node/__tests__/env.spec.ts index f1e74bc0193cfc..6482e7a261714c 100644 --- a/packages/vite/src/node/__tests__/env.spec.ts +++ b/packages/vite/src/node/__tests__/env.spec.ts @@ -15,7 +15,6 @@ describe('loadEnv', () => { "VITE_ENV1": "ENV1", "VITE_ENV2": "ENV2", "VITE_ENV3": "ENV3", - "VITE_USER_NODE_ENV": "production", } `) }) @@ -36,14 +35,13 @@ describe('loadEnv', () => { { "VITE_APP_BASE_ROUTE": "/app/", "VITE_APP_BASE_URL": "/app/", - "VITE_USER_NODE_ENV": "production", } `) }) test('VITE_USER_NODE_ENV', () => { loadEnv('development', join(__dirname, './env')) - expect(process.env.VITE_USER_NODE_ENV).toEqual('production') + expect(process.env.VITE_USER_NODE_ENV).toEqual(undefined) }) test('Already exists VITE_USER_NODE_ENV', () => { diff --git a/packages/vite/src/node/__tests__/env/.env.development b/packages/vite/src/node/__tests__/env/.env.development index f961c7335f1352..b18ba0c8928b44 100644 --- a/packages/vite/src/node/__tests__/env/.env.development +++ b/packages/vite/src/node/__tests__/env/.env.development @@ -1,4 +1,3 @@ -NODE_ENV=production VITE_ENV1=ENV1 VITE_ENV2=ENV2 VITE_ENV3=ENV3 diff --git a/playground/react-env/.env.staging b/playground/react-env/.env.staging deleted file mode 100644 index cbde1ccac505b4..00000000000000 --- a/playground/react-env/.env.staging +++ /dev/null @@ -1 +0,0 @@ -NODE_ENV=production From 03066b2140b5e89b5ffbd58cdb1cd5e5985ac745 Mon Sep 17 00:00:00 2001 From: bluwy Date: Fri, 25 Nov 2022 10:37:49 +0800 Subject: [PATCH 3/5] docs: update explanation --- docs/guide/env-and-mode.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/docs/guide/env-and-mode.md b/docs/guide/env-and-mode.md index b995373105105d..e3032cf92e5bfe 100644 --- a/docs/guide/env-and-mode.md +++ b/docs/guide/env-and-mode.md @@ -120,20 +120,22 @@ VITE_APP_TITLE=My App In your app, you can render the title using `import.meta.env.VITE_APP_TITLE`. -However, it is important to understand that **mode** is a wider concept than just development vs. production. A typical example is you may want to build in a "staging" mode where it should have development-like behavior and with slightly different env variables from production. - -You can overwrite the default mode used for a command by passing the `--mode` option flag. For example, if you want to build your app for our hypothetical staging mode: +In some cases, you may want to run `vite build` with a different mode to render a different title. You can overwrite the default mode used for a command by passing the `--mode` option flag. For example, if you want to build your app for a staging mode: ```bash vite build --mode staging ``` -And to get the behavior we want, we need a `.env.staging` file: +And create a `.env.staging` file: ``` # .env.staging -NODE_ENV=development VITE_APP_TITLE=My App (staging) ``` -Now your staging app should have development-like behavior, and display a different title from production. +As `vite build` runs a production build by default, you can also change this and run a development build by using a different mode and `.env` file configuration: + +``` +# .env.testing +NODE_ENV=development +``` From d44bdc9b48da3b705da4eda24400f3f42168c909 Mon Sep 17 00:00:00 2001 From: bluwy Date: Tue, 29 Nov 2022 01:04:16 +0800 Subject: [PATCH 4/5] chore: add warning --- packages/vite/src/node/config.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 47bff736545795..11bfca33c1d067 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -497,8 +497,17 @@ export async function resolveConfig( // Note it is possible for user to have a custom mode, e.g. `staging` where // development-like behavior is expected. This is indicated by NODE_ENV=development // loaded from `.staging.env` and set by us as VITE_USER_NODE_ENV - if (!isNodeEnvSet && process.env.VITE_USER_NODE_ENV === 'development') { - process.env.NODE_ENV = 'development' + const userNodeEnv = process.env.VITE_USER_NODE_ENV + if (!isNodeEnvSet && userNodeEnv) { + if (userNodeEnv === 'development') { + process.env.NODE_ENV = 'development' + } else { + logger.warn( + `NODE_ENV=${userNodeEnv} is not supported in the .env file. ` + + `This is only used to control the NODE_ENV of a build. ` + + `If you need to set process.env.NODE_ENV, you can set it in the Vite config instead.` + ) + } } const isProduction = process.env.NODE_ENV === 'production' From 5fe2f2da3292df4a98909f779f06d095bb327120 Mon Sep 17 00:00:00 2001 From: bluwy Date: Tue, 29 Nov 2022 14:18:10 +0800 Subject: [PATCH 5/5] docs: add comment --- packages/vite/src/node/config.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 11bfca33c1d067..780c43bfadca2c 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -502,9 +502,10 @@ export async function resolveConfig( if (userNodeEnv === 'development') { process.env.NODE_ENV = 'development' } else { + // NODE_ENV=production is not supported as it could break HMR in dev for frameworks like Vue logger.warn( `NODE_ENV=${userNodeEnv} is not supported in the .env file. ` + - `This is only used to control the NODE_ENV of a build. ` + + `Only NODE_ENV=development is supported to create a development build of your project. ` + `If you need to set process.env.NODE_ENV, you can set it in the Vite config instead.` ) }