您如何使用 Snowpack 进行开发、预开发和生产？

问题描述

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

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

• 开发
• 试生产
• 生产

这些是我在 NODE_ENV 中的脚本：

package.json

但是，"scripts": { "start": "snowpack dev","build": "snowpack build NODE_ENV=pre","build:production": "snowpack build NODE_ENV=pro" } 为 2 种构建类型返回 import.meta.env.MODE。

我无法让它工作，也许还有另一种方法可以做到这一点。

解决方法

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

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

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

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

3. 创建您的 .env 文件； .env.develop 和 .env.production
4. 创建您的 snowpack.config 文件； snowpack-develop.config.js 和 snowpack-production.config.js
5. 将您的自定义插件添加到两个 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') }],],};

6. 最后，添加您的 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