feat: support for import.meta.env.MODE (#3168)

web-infra-dev · Aug 8, 2024 · c26edc1 · c26edc1
1 parent d50a5a6
commit c26edc1
Show file tree

Hide file tree

Showing 17 changed files with 173 additions and 24 deletions.
diff --git a/e2e/cases/mode/index.test.ts → e2e/cases/mode/basic/index.test.ts b/e2e/cases/mode/index.test.ts → e2e/cases/mode/basic/index.test.ts
diff --git a/e2e/cases/mode/src/index.ts → e2e/cases/mode/basic/src/index.js b/e2e/cases/mode/src/index.ts → e2e/cases/mode/basic/src/index.js
diff --git a/e2e/cases/mode/define/index.test.ts b/e2e/cases/mode/define/index.test.ts
@@ -0,0 +1,47 @@
+import { build } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+
+test('should define vars in production mode correctly', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+  });
+
+  const file = await rsbuild.getIndexFile();
+  expect(file.content).toContain(
+    'console.log("import.meta.env.MODE","production")',
+  );
+  expect(file.content).not.toContain('console.log("import.meta.env.DEV")');
+  expect(file.content).toContain('console.log("import.meta.env.PROD")');
+});
+
+test('should define vars in development mode correctly', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    rsbuildConfig: {
+      mode: 'development',
+    },
+  });
+
+  const file = await rsbuild.getIndexFile();
+  expect(file.content).toContain(
+    'console.log(\'import.meta.env.MODE\', "development");',
+  );
+  expect(file.content).toContain("console.log('import.meta.env.DEV');");
+  expect(file.content).not.toContain("console.log('import.meta.env.PROD');");
+});
+
+test('should define vars in none mode correctly', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    rsbuildConfig: {
+      mode: 'none',
+    },
+  });
+
+  const file = await rsbuild.getIndexFile();
+  expect(file.content).toContain(
+    'console.log(\'import.meta.env.MODE\', "none");',
+  );
+  expect(file.content).not.toContain("console.log('import.meta.env.DEV');");
+  expect(file.content).not.toContain("console.log('import.meta.env.PROD');");
+});
diff --git a/e2e/cases/mode/define/src/index.js b/e2e/cases/mode/define/src/index.js
@@ -0,0 +1,7 @@
+console.log('import.meta.env.MODE', import.meta.env.MODE);
+if (import.meta.env.DEV) {
+  console.log('import.meta.env.DEV');
+}
+if (import.meta.env.PROD) {
+  console.log('import.meta.env.PROD');
+}
diff --git a/e2e/cases/mode/rsbuild.config.ts b/e2e/cases/mode/rsbuild.config.ts
diff --git a/e2e/cases/mode/tsconfig.json b/e2e/cases/mode/tsconfig.json
diff --git a/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap b/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap
@@ -307,6 +307,9 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
     },
     DefinePlugin {
       "definitions": {
+        "import.meta.env.DEV": true,
+        "import.meta.env.MODE": ""development"",
+        "import.meta.env.PROD": false,
         "process.env.ASSET_PREFIX": """",
       },
     },
@@ -667,6 +670,9 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when produ
     },
     DefinePlugin {
       "definitions": {
+        "import.meta.env.DEV": false,
+        "import.meta.env.MODE": ""production"",
+        "import.meta.env.PROD": true,
         "process.env.ASSET_PREFIX": """",
       },
     },
@@ -971,6 +977,9 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
     RsbuildCorePlugin {},
     DefinePlugin {
       "definitions": {
+        "import.meta.env.DEV": false,
+        "import.meta.env.MODE": ""production"",
+        "import.meta.env.PROD": true,
         "process.env.ASSET_PREFIX": """",
       },
     },
@@ -1258,6 +1267,9 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
     RsbuildCorePlugin {},
     DefinePlugin {
       "definitions": {
+        "import.meta.env.DEV": false,
+        "import.meta.env.MODE": ""production"",
+        "import.meta.env.PROD": true,
         "process.env.ASSET_PREFIX": """",
       },
     },

diff --git a/packages/compat/webpack/tests/__snapshots__/webpackConfig.test.ts.snap b/packages/compat/webpack/tests/__snapshots__/webpackConfig.test.ts.snap
@@ -70,6 +70,9 @@ exports[`webpackConfig > should allow to append and prepend plugins 1`] = `
   },
   DefinePlugin {
     "definitions": {
+      "import.meta.env.DEV": false,
+      "import.meta.env.MODE": ""none"",
+      "import.meta.env.PROD": false,
       "process.env.ASSET_PREFIX": """",
     },
   },

diff --git a/packages/core/src/plugins/define.ts b/packages/core/src/plugins/define.ts
@@ -8,6 +8,9 @@ export const pluginDefine = (): RsbuildPlugin => ({
     api.modifyBundlerChain((chain, { CHAIN_ID, bundler, environment }) => {
       const { config } = environment;
       const builtinVars: Define = {
+        'import.meta.env.MODE': JSON.stringify(config.mode),
+        'import.meta.env.DEV': config.mode === 'development',
+        'import.meta.env.PROD': config.mode === 'production',
         'process.env.ASSET_PREFIX': JSON.stringify(
           getPublicPathFromChain(chain, false),
         ),

diff --git a/packages/core/tests/__snapshots__/builder.test.ts.snap b/packages/core/tests/__snapshots__/builder.test.ts.snap
@@ -367,6 +367,9 @@ exports[`should use rspack as default bundler > apply rspack correctly 1`] = `
     DefinePlugin {
       "_args": [
         {
+          "import.meta.env.DEV": true,
+          "import.meta.env.MODE": ""development"",
+          "import.meta.env.PROD": false,
           "process.env.ASSET_PREFIX": """",
         },
       ],

diff --git a/packages/core/tests/__snapshots__/default.test.ts.snap b/packages/core/tests/__snapshots__/default.test.ts.snap
@@ -367,6 +367,9 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
     DefinePlugin {
       "_args": [
         {
+          "import.meta.env.DEV": true,
+          "import.meta.env.MODE": ""development"",
+          "import.meta.env.PROD": false,
           "process.env.ASSET_PREFIX": """",
         },
       ],
@@ -817,6 +820,9 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod
     DefinePlugin {
       "_args": [
         {
+          "import.meta.env.DEV": false,
+          "import.meta.env.MODE": ""production"",
+          "import.meta.env.PROD": true,
           "process.env.ASSET_PREFIX": """",
         },
       ],
@@ -1152,6 +1158,9 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
     DefinePlugin {
       "_args": [
         {
+          "import.meta.env.DEV": true,
+          "import.meta.env.MODE": ""development"",
+          "import.meta.env.PROD": false,
           "process.env.ASSET_PREFIX": """",
         },
       ],
@@ -1557,6 +1566,9 @@ exports[`tools.rspack > should match snapshot 1`] = `
     DefinePlugin {
       "_args": [
         {
+          "import.meta.env.DEV": true,
+          "import.meta.env.MODE": ""development"",
+          "import.meta.env.PROD": false,
           "process.env.ASSET_PREFIX": """",
         },
       ],

diff --git a/packages/core/tests/__snapshots__/define.test.ts.snap b/packages/core/tests/__snapshots__/define.test.ts.snap
@@ -8,6 +8,9 @@ exports[`plugin-define > should register define plugin correctly 1`] = `
       "_args": [
         {
           "NAME": ""Jack"",
+          "import.meta.env.DEV": false,
+          "import.meta.env.MODE": ""none"",
+          "import.meta.env.PROD": false,
           "process.env.ASSET_PREFIX": """",
         },
       ],

diff --git a/packages/core/tests/__snapshots__/environments.test.ts.snap b/packages/core/tests/__snapshots__/environments.test.ts.snap
@@ -1684,6 +1684,9 @@ exports[`environment config > tools.rspack / bundlerChain can be used in environ
       DefinePlugin {
         "_args": [
           {
+            "import.meta.env.DEV": true,
+            "import.meta.env.MODE": ""development"",
+            "import.meta.env.PROD": false,
             "process.env.ASSET_PREFIX": """",
           },
         ],
@@ -2000,6 +2003,9 @@ exports[`environment config > tools.rspack / bundlerChain can be used in environ
       DefinePlugin {
         "_args": [
           {
+            "import.meta.env.DEV": true,
+            "import.meta.env.MODE": ""development"",
+            "import.meta.env.PROD": false,
             "process.env.ASSET_PREFIX": """",
           },
         ],

diff --git a/packages/plugin-react/tests/__snapshots__/index.test.ts.snap b/packages/plugin-react/tests/__snapshots__/index.test.ts.snap
@@ -402,6 +402,9 @@ exports[`plugins/react > should work with swc-loader 1`] = `
     DefinePlugin {
       "_args": [
         {
+          "import.meta.env.DEV": true,
+          "import.meta.env.MODE": ""development"",
+          "import.meta.env.PROD": false,
           "process.env.ASSET_PREFIX": """",
         },
       ],

diff --git a/packages/plugin-vue/tests/__snapshots__/index.test.ts.snap b/packages/plugin-vue/tests/__snapshots__/index.test.ts.snap
@@ -78,6 +78,9 @@ DefinePlugin {
       "__VUE_OPTIONS_API__": true,
       "__VUE_PROD_DEVTOOLS__": false,
       "__VUE_PROD_HYDRATION_MISMATCH_DETAILS__": false,
+      "import.meta.env.DEV": false,
+      "import.meta.env.MODE": ""none"",
+      "import.meta.env.PROD": false,
       "process.env.ASSET_PREFIX": """",
     },
   ],

diff --git a/website/docs/en/guide/advanced/env-vars.mdx b/website/docs/en/guide/advanced/env-vars.mdx
@@ -4,6 +4,39 @@ Rsbuild supports injecting environment variables or expressions into the code du
 
 ## Default Variables
 
+### import.meta.env.MODE
+
+You can use `import.meta.env.MODE` in the client code to read the value of the [mode](/config/mode) configuration.
+
+```ts
+if (import.meta.env.MODE === 'development') {
+  console.log('this is development mode');
+}
+```
+
+In development mode, the above code will be compiled to:
+
+```js
+if (true) {
+  console.log('this is development mode');
+}
+```
+
+In production mode, the above code will be compiled to:
+
+```js
+if (false) {
+  console.log('this is development mode');
+}
+```
+
+During code minification, `if (false) { ... }` will be recognized as invalid code and removed automatically.
+
+You can also use the following environment variables:
+
+- `import.meta.env.DEV`: If [mode](/config/mode) is `'development'`, the value is `true`; otherwise, it is `false`.
+- `import.meta.env.PROD`: If [mode](/config/mode) is `'production'`, the value is `true`; otherwise, it is `false`.
+
 ### process.env.NODE_ENV
 
 By default, Rsbuild will automatically set the `process.env.NODE_ENV` environment variable to `'development'` in development mode and `'production'` in production mode.
@@ -16,23 +49,23 @@ if (process.env.NODE_ENV === 'development') {
 }
 ```
 
-In development mode, the above code will be compiled as:
+In development mode, the above code will be compiled to:
 
 ```js
 if (true) {
   console.log('this is a development log');
 }
 ```
 
-In production mode, the above code will be compiled as:
+In production mode, the above code will be compiled to:
 
 ```js
 if (false) {
   console.log('this is a development log');
 }
 ```
 
-After code minification, `if (false) { ... }` will be recognized as invalid code and removed automatically.
+During code minification, `if (false) { ... }` will be recognized as invalid code and removed automatically.
 
 ### process.env.ASSET_PREFIX
 
@@ -62,13 +95,13 @@ Then we can access the image URL in the client code:
 const Image = <img src={`${process.env.ASSET_PREFIX}/static/icon.png`} />;
 ```
 
-In development mode, the above code will be compiled as:
+In development mode, the above code will be compiled to:
 
 ```jsx
 const Image = <img src={`/static/icon.png`} />;
 ```
 
-In production mode, the above code will be compiled as:
+In production mode, the above code will be compiled to:
 
 ```jsx
 const Image = <img src={`https://example.com/static/icon.png`} />;

diff --git a/website/docs/zh/guide/advanced/env-vars.mdx b/website/docs/zh/guide/advanced/env-vars.mdx
@@ -4,6 +4,39 @@ Rsbuild 支持在编译过程中向代码中注入环境变量或表达式，这
 
 ## 默认环境变量
 
+### import.meta.env.MODE
+
+你可以在 client 代码中使用 `import.meta.env.MODE` 来读取 [mode](/config/mode) 配置项的值。
+
+```ts
+if (import.meta.env.MODE === 'development') {
+  console.log('this is development mode');
+}
+```
+
+在开发模式，以上代码会被编译为：
+
+```js
+if (true) {
+  console.log('this is development mode');
+}
+```
+
+在生产模式，以上代码会被编译为：
+
+```js
+if (false) {
+  console.log('this is development mode');
+}
+```
+
+在代码压缩过程中，`if (false) { ... }` 会被识别为无效代码，并被自动移除。
+
+此外，你还可以使用以下环境变量：
+
+- `import.meta.env.DEV`：当 [mode](/config/mode) 为 `'development'` 时，值为 `true`，否则为 `false`。
+- `import.meta.env.PROD`：当 [mode](/config/mode) 为 `'production'` 时，值为 `true`，否则为 `false`。
+
 ### process.env.NODE_ENV
 
 默认情况下，Rsbuild 会自动设置 `process.env.NODE_ENV` 环境变量，在开发模式为 `'development'`，生产模式为 `'production'`。