环境变量打字脚本

Environment Variables TypeScript

本文关键字：脚本 环境变量      更新时间：2023-09-26

假设我有一个代码块，我只想在暂存环境中存在(或运行(。我已经在该环境中设置了一个环境变量(例如，ENV ="暂存"(，TypeScript 有没有办法在编译期间访问该变量？

例：

if (Environment['ENV'] == 'staging') console.log('testing');

哪个会在上述环境中编译为(冗余但有效的(if ('staging' == 'staging') ...？

不，这是不可能的。

如果你的 TypeScript 文件在 Node 中运行，你可以使用 process.env，因为它是一个常规的 Node API - 但在这种情况下，环境变量是在运行时由编译的文件访问的，而不是在编译时由 TypeScript 访问的。

如果您的TypeScript文件在浏览器中运行，则没有process.env，因此您甚至无法在运行时访问它。您可以使用像 Webpack 这样的工具在构建时将编译文件中process.env变量的引用替换为它们各自的值 - 但这仍然不是 TypeScript 所做的。

所以不幸的是，答案是否定的：TypeScript 无法做到这一点，你必须使用其他东西(比如 Webpack，甚至只是搜索和替换(将环境变量注入到你的脚本中。

TypeScript 有没有办法在编译期间访问该变量

是的。更喜欢使用在节点中按原样工作的process.env，并且可以使用 --dedefined 与 webpack 一起使用。

更多

示例显示如何将其用于构建输出切换：https://basarat.gitbook.io/typescript/main-1/build-toggles

它在节点中工作。

npm install dotenv --save

使用 .env 创建文件。在里面输入Staging = "staging"

在您的服务器/应用程序中调用它：

require('dotenv').config();

在您的代码中，您可以像这样使用它：

if (process.env.Staging = "staging") //true
{ 
 foo(); 
}

终于想出了如何做到这一点，如果你愿意使用Python和Flask。这有点笨拙，但迄今为止我能够找到的最佳解决方案。如果你正确地实现了TypeScript端，它将在你的应用程序启动后立即发生 - 即使不是在编译时。

这有 3 个部分：

  1. 在 Python 中获取环境变量信息
  2. 将数据嵌入到网页中
  3. 从您的JavaScript/TypeScript代码访问该数据

步骤 1

设置 Python 字典以供外部使用

在

Flask 代码的某个位置，__init__.py文件、routes.py 文件或其他类似可访问的文件具有以下设置：

api_port = os.environ.get("API_PORT", "8888")
api_proto = os.environ.get("API_PROTOCOL", "ws://")
port = int(os.environ.get("PORT", 80))
version = os.environ.get("VERSION", "6.9")
developer_buttons = os.environ.get("DEVELOPER", "False") == "True"
ENV = os.environ.get("ENV", 'staging')
@server.context_processor
def inject_data() -> dict:
    # .context_processor information: https://stackoverflow.com/a/43336023/8705841
    flask_data = {'api_port',
                  'api_proto',
                  'port',
                  'version',
                  'developer_buttons',
                  'ENV',
                  'etc'}
    # Create a dictionary from a list of variables: https://stackoverflow.com/a/9496018/8705841
    return {'flask_data': dict(((k, eval(k)) for k in flask_data))}

@server部分应与 Flask 应用变量的名称匹配(使用 server = Flask(__name__) 实例化(，并且并不特别重要(通常称为 app (。flask_data字典/列表应该包含您想要移植到前端的所有 Python 变量，但用引号括起来 - 返回eval部分将获取与输入字符串匹配的 Python 变量k。

步骤 2

使数据在网页上可用

在index.html页面中，在 <head> 标记内(在其他 <script> 标记旁边(，也包含以下标记：

<head>
    <!-- a whole bunch of stuff -->
    
    <!-- get all the Flask variables from Python -> TypeScript -->
    <script id=flask_data type="text/json">{{ flask_data|tojson }}</script>
    
    <!-- possibly a whole bunch more stuff -->
</head>

基本上每个StackOverflow帖子甚至提到Flask都有上述复制粘贴。

步骤 3

从任何 JavaScript 文件访问数据

这是没有人谈论的部分 - 实际上使用你的JavaScript(或TypeScript(代码中的数据，无论你的目录设置如何。这有点笨拙，但基本上您可以访问包含嵌入数据的 HTML 元素，然后根据需要解析它以在您的程序中使用。从技术上讲，这是TypeScript代码，但应该适用于JavaScript和TypeScript(经过大量的试验和错误才最终让它在我的TypeScript构建中工作(。

foo() {
    const flask_data = JSON.parse((document.querySelector('#flask_data') as HTMLElement).textContent || "");
    this.version = flask_data.version
    const env = flask_data.ENV;
    console.log("Data: " + flask_data); // just for debugging, not actually necessary
    console.log("Environment: " + env);
    console.log("Running version '" + this.version + "'");
    
    if (env === "staging") {
        do_something();
    else {
        do_something_else();
        return input_from_python;
    }
}
// the rest of your program, using any part of the flask_data dictionary however you need
// .
// .
// .
相关文章：