如何在JavaScript文件中获取Jekyll.environment的值（非内联标签方式）

我之前也碰到过这个需求——在JS文件里拿Jekyll的环境变量，但又不想在JS里直接写Liquid标签。分享几个靠谱的方案，都能满足你的要求：

这是我最常用的方法，只需要在主模板的头部加一行内联脚本，把JEKYLL_ENV暴露成全局变量，完全不用碰JS文件的内容：

在你的_layouts/default.html（或者其他全局模板）的<head>里添加这段代码：

<head>
  <!-- 其他头部元素比如样式、meta标签 -->
  <script>
    // 把Jekyll环境变量挂载到window全局对象上
    window.JekyllEnv = "{{ JEKYLL_ENV }}";
  </script>
</head>

之后在任意.js文件里，直接访问这个全局变量就行：

// 打印当前环境
console.log("当前Jekyll环境：", window.JekyllEnv);

// 根据环境执行不同逻辑
if (window.JekyllEnv === "production") {
  // 生产环境：比如禁用调试日志、加载压缩资源
  console.log("Running in production mode");
} else {
  // 开发环境：开启调试工具、加载未压缩资源
  console.log("Running in development mode");
}

这个方案零额外依赖，完全靠Jekyll的原生渲染能力搞定，上手最快。

如果不想在HTML里加内联脚本，可以让Jekyll渲染一个专门的JSON配置文件，然后JS异步加载它：

1. 在项目根目录创建env-config.json.liquid文件，内容如下：

{
  "jekyllEnv": "{{ JEKYLL_ENV }}"
}

2. 确保Jekyll会处理这个文件——如果你的_config.yml里没有配置include，默认会包含这类文件；如果有自定义include，记得加上：

include:
  - "*.json.liquid"

3. 在JS文件里通过fetch加载这个配置：

fetch("/env-config.json")
  .then(res => res.json())
  .then(config => {
    console.log("当前Jekyll环境：", config.jekyllEnv);
    // 在这里写依赖环境的业务逻辑
  })
  .catch(err => console.error("加载环境配置失败：", err));

这个方案的优势是JS文件完全纯净，没有任何和模板相关的代码，适合对代码整洁度要求高的场景。

如果你的项目用了Webpack、Rollup这类构建工具，可以把JEKYLL_ENV作为环境变量注入到JS中：

首先在package.json的脚本里传递环境变量：

{
  "scripts": {
    "build": "JEKYLL_ENV=production webpack && jekyll build",
    "dev": "JEKYLL_ENV=development webpack serve & jekyll serve"
  }
}

然后在Webpack配置里用DefinePlugin把变量注入：

const webpack = require("webpack");

module.exports = {
  // 其他Webpack配置
  plugins: [
    new webpack.DefinePlugin({
      "process.env.JEKYLL_ENV": JSON.stringify(process.env.JEKYLL_ENV)
    })
  ]
};

之后在JS文件里就能直接使用process.env.JEKYLL_ENV了：

console.log("当前Jekyll环境：", process.env.JEKYLL_ENV);

这个方案适合已经有前端构建流程的项目，能很好地融入现代开发工具链。

内容的提问来源于stack exchange，提问作者flppv