fix: validate environment names for safety

packages/core/rslib.config.ts

@@ -72,7 +72,7 @@ export default defineConfig({
   },
   lib: [
     {
-      id: 'esm:index',
+      id: 'esm_index',
       format: 'esm',
       syntax: 'es2021',
       plugins: [pluginFixDtsTypes],
@@ -84,7 +84,7 @@ export default defineConfig({
       },
     },
     {
-      id: 'esm:loaders',
+      id: 'esm_loaders',
       format: 'esm',
       syntax: 'es2021',
       source: {
@@ -102,7 +102,7 @@ export default defineConfig({
       },
     },
     {
-      id: 'cjs:index',
+      id: 'cjs_index',
       format: 'cjs',
       syntax: 'es2021',
       source: {
@@ -115,7 +115,7 @@ export default defineConfig({
       },
     },
     {
-      id: 'esm:client',
+      id: 'esm_client',
       format: 'esm',
       syntax: 'es2017',
       source: {

packages/core/src/inspectConfig.ts

@@ -101,8 +101,6 @@ export async function outputInspectConfigFiles({
 }): Promise<void> {
   const { outputPath } = inspectOptions;
 
-  const formatOutputName = (name: string) => name.replace(/[:]/g, '_');
-
   const files = [
     ...rawEnvironmentConfigs.map(({ name, content }) => {
       if (rawEnvironmentConfigs.length === 1) {
@@ -115,7 +113,7 @@ export async function outputInspectConfigFiles({
           content,
         };
       }
-      const outputFile = `rsbuild.config.${formatOutputName(name)}.mjs`;
+      const outputFile = `rsbuild.config.${name}.mjs`;
       const outputFilePath = join(outputPath, outputFile);
 
       return {
@@ -125,7 +123,7 @@ export async function outputInspectConfigFiles({
       };
     }),
     ...rawBundlerConfigs.map(({ name, content }) => {
-      const outputFile = `${configType}.config.${formatOutputName(name)}.mjs`;
+      const outputFile = `${configType}.config.${name}.mjs`;
       let outputFilePath = join(outputPath, outputFile);
 
       // if filename is conflict, add a random id to the filename.

packages/core/src/provider/initConfigs.ts

@@ -175,6 +175,19 @@ const validateRsbuildConfig = (config: NormalizedConfig) => {
       )} option should start with a slash, for example: "/base"`,
     );
   }
+
+  if (config.environments) {
+    const names = Object.keys(config.environments);
+    const regexp = /^[\w$-]+$/;
+    for (const name of names) {
+      // ensure environment names are filesystem and property access safe
+      if (!regexp.test(name)) {
+        logger.warn(
+          `${color.dim('[rsbuild:config]')} Environment name "${color.yellow(name)}" contains invalid characters. Only letters, numbers, "-", "_", and "$" are allowed.`,
+        );
+      }
+    }
+  }
 };
 
 /**

website/docs/en/config/environments.mdx

@@ -124,3 +124,18 @@ const nodeConfig = {
   },
 };
 ```
+
+## Environment name
+
+Since environment names are used for directory names and object property names, it is recommended to only include letters, numbers, `-`, `_`, and `$`. When using other characters, Rsbuild will output a warning to prompt you.
+
+```ts
+export default {
+  environments: {
+    someName: {}, // ✅
+    some_name: {}, // ✅
+    'some-name': {}, // ✅
+    'some:name': {}, // ❌
+  },
+};
+```

website/docs/zh/config/environments.mdx

@@ -124,3 +124,18 @@ const nodeConfig = {
   },
 };
 ```
+
+## Environment 名称
+
+由于 environment 名称会用于目录名和对象属性名，因此建议只包含字母、数字、`-`、`_` 和 `$`，使用其他字符时，Rsbuild 会输出 warning 进行提示。
+
+```ts
+export default {
+  environments: {
+    someName: {}, // ✅
+    some_name: {}, // ✅
+    'some-name': {}, // ✅
+    'some:name': {}, // ❌
+  },
+};
+```