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

Posted 2023-02-16

【中文标题】您如何使用 Snowpack 与 dev、pre 和 prod 合作？

【英文标题】：How do you work with dev, pre and prod with Snowpack?

【发布时间】：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。

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

【参考方案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 ***' ;
;

创建您的 .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 DocsSnowpack Plugin DocsSnowpack Env Docs