feat: add multiple envs feat

.env.ra.dev

@@ -0,0 +1 @@
+REACT_ADMIN_ENV=我是本地开发环境配置

.env.ra.production

@@ -0,0 +1,2 @@
+REACT_ADMIN_ENV=我是打包线上环境配置
+REACT_ADMIN_TEST=我是其他环境配置

.env.ra.starandsea

@@ -0,0 +1 @@
+REACT_ADMIN_ENV=我是星辰大海，你运行yarn starandsea试试

config/env.js

@@ -8,36 +8,36 @@ const paths = require('./paths');
 delete require.cache[require.resolve('./paths')];
 
 const NODE_ENV = process.env.NODE_ENV;
+const REACT_ADMIN = process.env.REACT_ADMIN;
 if (!NODE_ENV) {
-  throw new Error(
-    'The NODE_ENV environment variable is required but was not specified.'
-  );
+    throw new Error('The NODE_ENV environment variable is required but was not specified.');
 }
 
 // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
 const dotenvFiles = [
-  `${paths.dotenv}.${NODE_ENV}.local`,
-  `${paths.dotenv}.${NODE_ENV}`,
-  // Don't include `.env.local` for `test` environment
-  // since normally you expect tests to produce the same
-  // results for everyone
-  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
-  paths.dotenv,
+    `${paths.dotenv}.${NODE_ENV}.local`,
+    `${paths.dotenv}.${NODE_ENV}`,
+    `${paths.dotenv}.ra.${REACT_ADMIN}`,
+    // Don't include `.env.local` for `test` environment
+    // since normally you expect tests to produce the same
+    // results for everyone
+    NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+    paths.dotenv,
 ].filter(Boolean);
 
 // Load environment variables from .env* files. Suppress warnings using silent
 // if this file is missing. dotenv will never modify any environment variables
 // that have already been set.  Variable expansion is supported in .env files.
 // https://github.com/motdotla/dotenv
 // https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach(dotenvFile => {
-  if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
-      require('dotenv').config({
-        path: dotenvFile,
-      })
-    );
-  }
+dotenvFiles.forEach((dotenvFile) => {
+    if (fs.existsSync(dotenvFile)) {
+        require('dotenv-expand')(
+            require('dotenv').config({
+                path: dotenvFile,
+            })
+        );
+    }
 });
 
 // We support resolving modules according to `NODE_PATH`.
@@ -51,43 +51,44 @@ dotenvFiles.forEach(dotenvFile => {
 // We also resolve them to make sure all tools using them work consistently.
 const appDirectory = fs.realpathSync(process.cwd());
 process.env.NODE_PATH = (process.env.NODE_PATH || '')
-  .split(path.delimiter)
-  .filter(folder => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, folder))
-  .join(path.delimiter);
+    .split(path.delimiter)
+    .filter((folder) => folder && !path.isAbsolute(folder))
+    .map((folder) => path.resolve(appDirectory, folder))
+    .join(path.delimiter);
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 // injected into the application via DefinePlugin in Webpack configuration.
 const REACT_APP = /^REACT_APP_/i;
+const REACT_ADMIN_REG = /^REACT_ADMIN_/i;
 
 function getClientEnvironment(publicUrl) {
-  const raw = Object.keys(process.env)
-    .filter(key => REACT_APP.test(key))
-    .reduce(
-      (env, key) => {
-        env[key] = process.env[key];
-        return env;
-      },
-      {
-        // Useful for determining whether we’re running in production mode.
-        // Most importantly, it switches React into the correct mode.
-        NODE_ENV: process.env.NODE_ENV || 'development',
-        // Useful for resolving the correct path to static assets in `public`.
-        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
-        // This should only be used as an escape hatch. Normally you would put
-        // images into the `src` and `import` them in code to get their paths.
-        PUBLIC_URL: publicUrl,
-      }
-    );
-  // Stringify all values so we can feed into Webpack DefinePlugin
-  const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
-      env[key] = JSON.stringify(raw[key]);
-      return env;
-    }, {}),
-  };
+    const raw = Object.keys(process.env)
+        .filter((key) => REACT_APP.test(key) || REACT_ADMIN_REG.test(key))
+        .reduce(
+            (env, key) => {
+                env[key] = process.env[key];
+                return env;
+            },
+            {
+                // Useful for determining whether we’re running in production mode.
+                // Most importantly, it switches React into the correct mode.
+                NODE_ENV: process.env.NODE_ENV || 'development',
+                // Useful for resolving the correct path to static assets in `public`.
+                // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+                // This should only be used as an escape hatch. Normally you would put
+                // images into the `src` and `import` them in code to get their paths.
+                PUBLIC_URL: publicUrl,
+            }
+        );
+    // Stringify all values so we can feed into Webpack DefinePlugin
+    const stringified = {
+        'process.env': Object.keys(raw).reduce((env, key) => {
+            env[key] = JSON.stringify(raw[key]);
+            return env;
+        }, {}),
+    };
 
-  return { raw, stringified };
+    return { raw, stringified };
 }
 
 module.exports = getClientEnvironment;

package.json

@@ -99,8 +99,9 @@
         "workbox-webpack-plugin": "4.3.1"
     },
     "scripts": {
-        "start": "node scripts/start.js",
-        "build": "node scripts/build.js",
+        "start": "node scripts/start.js dev",
+        "build": "node scripts/build.js production",
+        "starandsea": "node scripts/build.js starandsea",
         "test": "node scripts/test.js",
         "commit": "git-cz",
         "release": "standard-version"