使用 Webpack 编写 12 Factor 应用程序？

Question

您将如何编写 12 因素 webpack/expressjs 应用程序？特别是，我希望在运行时通过expressjs服务器上的环境变量提供一些应用程序配置。

目前，我在

<script>

标签中创建一个全局 Config 对象，并通过渲染模板并传入值来填充它，但我想使用 webpack 外部并将其包装为适当的模块。有没有人尝试过这样做，或者有类似的解决方案？

Answer 1

无论承认这一点对我来说有多痛苦，我只是通过容器的

sed

脚本

ENTRYPOINT

进入 12 因素合规性。

例如：

#!/bin/bash

INJECT_JSON_FILE=/12factor.json   # Mounted from Docker volume or Kubernetes ConfigMap
HTML_FILE=build/index.html

set -e -x

main() {
    source_dir=build
    serve_dir=/tmp/serve
    cp -a "$source_dir" "$serve_dir"

    if [ -f "$INJECT_JSON_FILE" ]; then
        inject_json_file "$INJECT_JSON_FILE" "$HTML_FILE" < build/index.html > /tmp/serve/index.html
    fi

    exec serve -s "$serve_dir"
}

inject_json_file () {
    local json_file="$1" target_html_file="$2"

    sed 's/></>\n</'g < "$target_html_file" | while read line; do
        case "$line" in
            "<"script*)
                echo "<script>window._12factor = "
                cat "$json_file"
                echo ";</script>"
                ;;
        esac
        echo "$line"
    done
}

main

Answer 2

在 webpack 中使用 ENV 变量的一种方法是通过

--env.VAR1=var1-sample

。

您可以使用以下命令创建

environment.js

文件：

export ENV = {
  VAR1: process.env.VAR1 || 'local-development'
}

在构建时，NODE 会将这些值替换为从

--env.VAR1

收集的值。