您如何使用 Snowpack 与 dev、pre 和 prod 合作？答案

【问题标题】：How do you work with dev, pre and prod with Snowpack?您如何使用 Snowpack 与 dev、pre 和 prod 合作？
【发布时间】：2021-05-09 20:04:05
【问题描述】：

我想在我使用 Snowpack 的 package.json 中定义环境变量，但据我所知，Snowpack 会根据 dev vs build 自动设置 NODE_ENV。

是否可以为 3 种模式而不是 2 种模式定义变量，我的意思是：

发展
试生产
生产

这些是我在package.json 中的脚本：

"scripts": {
    "start": "snowpack dev",
    "build": "snowpack build NODE_ENV=pre",
    "build:production": "snowpack build NODE_ENV=pro"
}

但是，import.meta.env.MODE 为 2 种构建类型返回 production。

我无法让它工作，也许还有另一种方法。

【问题讨论】：

标签： node.js environment-variables package.json snowpack

【解决方案1】：

我的用例并不完全相同，但相似，您应该能够使用此技术生成任意数量的不同环境。

我可以通过编写自定义雪包插件来使用 .env 文件和 dotenv npm 包和两个单独的 snowpack.config.js 文件来做到这一点；一个用于开发，一个用于生产。方法如下...

将dotenv 添加到您的项目中：npm i -D dotenv
创建这个新文件。这将是我们的自定义雪包插件

// env-loader.js
const dotenv = require('dotenv');
module.exports = function plugin(snowpackConfig, { path }) {
  dotenv.config({ path: path });
  return { name: 'Custom plugin from StackOverflow' };
};

创建您的 .env 文件； .env.develop 和 .env.production
创建你的 snowpack.config 文件； snowpack-develop.config.js 和 snowpack-production.config.js
将您的自定义插件添加到两个 snowpack.config 文件中。请务必为其提供自定义插件的正确路径以及 .env 文件的正确路径。

// snowpack-develop.config.js
const path = require('path'); 
module.exports = {
  plugins: [
    ['./path/to/env-loader', { path: path.resolve(process.cwd(), '.develop.env') }],
  ],
};

最后，添加您的 npm 脚本。将您的开发脚本指向 snowpack-develop 文件，并将 prod 指向 snowpack-production 文件。

  "scripts": {
    "develop": "snowpack dev --config ./snowpack-develop.config.js",
    "build:dev": "snowpack build --config ./snowpack-develop.config.js",
    "build:prod": "snowpack build --config ./snowpack-production.config.js"
  },

在 snowpack 中，环境变量必须包含前缀 SNOWPACK_PUBLIC_，并且要在代码中使用变量，您可以像这样访问它：import.meta.env.SNOWPACK_PUBLIC_MY_VARIABLE。它在构建时运行查找和替换。

Snowpack Config Docs
Snowpack Plugin Docs
Snowpack Env Docs

【讨论】：