草庐IT

Web前端工程化开发中，这样配置多环境，既灵活又优雅

前端梁哥 2023-04-22 原文

在Web前端工程化开发中，我们通常需要多个环境，至少需要开发和生产环境，也可能还需要不同的测试环境。那么，我是怎样配置多环境的呢？

通常，一些脚手架都有配置多环境的解决方案，比如在项目根目录创建多个.env文件。但我不喜欢在根目录创建很多.env文件，我觉得这样不够优雅，也不够灵活，并没有采用这种方案，而是使用了其它的解决方案。

我使用了一个第三方包，叫：env-cmd，它的用法非常简单。我们需要创建一个环境变量配置文件，扩展名可以是json或者js，文件名可以随便起，可以放到任何目录，使用时指定配置文件路径即可。

我比较推荐在项目根目录创建一个.env-cmdrc.js文件，因为这么做就不需要指定配置文件路径了，env-cmd默认查找的就是根目录的这个文件。扩展名也可以是json，但我推荐用js，为什么呢？因为js更加灵活。

首先，提醒大家一点，自定义的环境变量，命名一定要遵守脚手架的命名约定，比如：vue-cli要求必须以VUE_APP_开头。

如下代码是env-cmd的配置文件长相，导出的对象属性名就是env-cmd 环境名字，这是用js的方式。如果用json，就不需要导出了。

// .env-cmdrc.js
module.exports = {
  development: {
    API_BASE: '/api'
  },
  production: {
    API_BASE: '/'
  },
  test: {
    API_BASE: '/'
  }
}

以下代码是我们其中一个项目的配置，大家看到js作为配置文件的优势了吧？

// .env-cmdrc.js
const envList = [
  {
    MODE: 'development',
    API_BASE: '/api',
    FILE_BASE: '/files'
  },
  {
    MODE: 'production',
    API_BASE: '/'
  }
]

module.exports = envList.reduce((t, _) => {
  return {
    ...t,
    [_.MODE]: {
      ..._,
      APP_NAME: _.APP_NAME || 'XXXX管理后台'
    }
  }
}, {})

那么，有了配置文件，我们该如何使用呢？只需在package.json中的开发和构建脚本之前增加env-cmd -e命令，用于指定环境，以下就是使用方法。

"scripts": {
    "dev": "env-cmd -e development vite",
    "dist": "vite build",
    "build": "env-cmd -e production npm run dist"
  }

如果你用的vite，或者其它无法自动注入环境变量的脚手架，就需要你手动将环境变量注入应用了，如下是vite的注入例子。大家能理解吧？

import { defineConfig } from 'vite'

export default defineConfig({
  define: [
    'MODE',
    'API_BASE',
    'APP_NAME',
    'FILE_BASE'
  ].reduce((t, k) => ({ ...t, [`process.env.${k}`]: JSON.stringify(process.env[k]) }), {}),
})

下面是在我们的应用中使用的例子。

/** @type {string} 多环境配置中的环境名 */
export const ENV_NAME = process.env.MODE

/** @type {string} 接口baseUrl */
export const API_BASE = process.env.API_BASE

/** @type {string} 文件baseUrl */
export const FILE_BASE = process.env.FILE_BASE

/** @type {string} 应用名称 */
export const APP_NAME = process.env.APP_NAME

感谢阅读！是不是很简单？

多环工程化spanstylecolor开发前端Web前端工程化

有关Web前端工程化开发中，这样配置多环境，既灵活又优雅的更多相关文章

  1. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  2. Vscode+Cmake配置并运行opencv环境(Windows和Ubuntu大同小异) - 2

    之前在培训新生的时候，windows环境下配置opencv环境一直教的都是网上主流的vsstudio配置属性表，但是这个似乎对新生来说难度略高(虽然个人觉得完全是他们自己的问题)，加之暑假之后对cmake实在是爱不释手，且这样配置确实十分简单(其实都不需要配置)，故斗胆妄言vscode下配置CV之法。其实极为简单，图比较多所以很长。如果你看此文还配不好，你应该思考一下是不是自己的问题。闲话少说，直接开始。0.CMkae简介有的人到大二了都不知道cmake是什么，我不说是谁。CMake是一个开源免费并且跨平台的构建工具，可以用简单的语句来描述所有平台的编译过程。它能够根据当前所在平台输出对应的m

  3. ruby-on-rails - Rails 优雅地处理超时 session ？ - 2

    使用rails4，ruby2。我在rails配置中为我的cookiesession设置了30分钟的超时时间。问题是，如果我转到表单，让session超时，然后提交表单，我会收到此ActionController::InvalidAuthenticityToken错误。如何在Rails中优雅地处理这个错误？比如说，重定向到登录屏幕？ 最佳答案 在您的ApplicationController:rescue_fromActionController::InvalidAuthenticityTokendoredirect_tosome_p

  4. ruby - 获取数组中的值并最小化某个类属性的最优雅的方法是什么？ - 2

    假设我有以下类(class):classPersondefinitialize(name,age)@name=name@age=ageenddefget_agereturn@ageendend我有一组Person对象。是否有一种简洁的、类似于Ruby的方法来获取最小(或最大)年龄的人？如何根据它对它们进行排序？ 最佳答案 这样做会:people_array.min_by(&:get_age)people_array.max_by(&:get_age)people_array.sort_by(&:get_age)

  5. ruby-on-rails - ruby gem如何在rails环境下工作 - 2

    我试图在rails中了解rubygems是如何变得可以自动使用的，而不是在使用required的文件中gem？ 最佳答案 这是通过bundler/setup完成的:http://bundler.io/v1.3/bundler_setup.html.它在您的config/boot.rb文件中是必需的。简而言之，它首先将环境变量设置为指向您的Gemfile:ENV['BUNDLE_GEMFILE']||=File.expand_path('../../Gemfile',__FILE__)然后它通过要求bundler/setup将所有ge

  6. ruby-on-rails - 优雅的 Rails : multiple routes, 相同的 Controller Action - 2

    让多条路线去同一条路的最优雅的方式是什么ControllerAction？我有:get'dashboard',to:'dashboard#index'get'dashboard/pending',to:'dashboard#index'get'dashboard/live',to:'dashboard#index'get'dashboard/sold',to:'dashboard#index'这很丑陋。有什么“更优雅”的建议吗？一个类轮的奖励积分。 最佳答案 为什么不只有一个路由和一个Controller操作，并根据传递给它的参数来

  7. ruby - 鸭子输入字符串、符号和数组的优雅方式？ - 2

    这是针对我无法破坏的现有公共(public)API，但我确实希望对其进行扩展。目前，该方法采用字符串或符号或任何其他在作为第一个参数传递给send时有意义的内容我想添加发送字符串、符号等列表的功能。我可以只使用is_a吗？数组，但还有其他发送列表的方法，这不是很像ruby​​。我将调用列表中的map，所以第一个倾向是使用respond_to?:map。但是字符串也会响应:map，所以这行不通。 最佳答案 如何将它们全部视为数组？String的行为与仅包含String的Array相同:deffoo(obj,arg)[*arg].eac

  8. ruby - 如何配置 Ruby Mechanize 代理以通过 Charles Web 代理工作？ - 2

    我正在使用Ruby/Mechanize编写一个“自动填写表格”应用程序。它几乎可以工作。我可以使用精彩CharlesWeb代理以查看服务器和我的Firefox浏览器之间的交换。现在我想使用Charles查看服务器和我的应用程序之间的交换。Charles在端口8888上代理。假设服务器位于https://my.host.com。.一件不起作用的事情是:@agent||=Mechanize.newdo|agent|agent.set_proxy("my.host.com",8888)end这会导致Net::HTTP::Persistent::Error:...lib/net/http/pe

  9. ruby-on-rails - 我需要一个真正的 UNIX RoR 开发环境 - 2

    从一开始，我就是一个Windows高手。我从MS-DOS开始。我安装了Windows2.1以及此后的所有Windows。现在，我家里有10台不同的Windows机器在运行，从Windows7Ultimate到各种版本的WindowsServer。我还没有完成Windows8，也不想去那里。我在服务器和各种软件方面都有UNIX经验，但它并不是我的首选环境。但是，我想我正在转换。我试图假装使用Cygwin和MSYS在Windows下运行UNIX。我的目的是搭建一个开发环境。两者都让我失望了。我花了比开发更多的时间来解决一系列技术问题。这是NotAcceptable。到目前为止，我的Ruby

  10. ruby-on-rails - 如果特定语言环境中缺少翻译，如何配置 i18n 以使用 en 语言环境？ - 2

    如果特定语言环境中缺少翻译，如何配置i18n以使用en语言环境翻译？当前已插入翻译缺失消息。我正在使用RoR3.1。 最佳答案 找到相似的question这里是答案:#application.rb#railswillfallbacktoconfig.i18n.default_localetranslationconfig.i18n.fallbacks=true#railswillfallbacktoen,nomatterwhatissetasconfig.i18n.default_localeconfig.i18n.fallback

随机推荐