1

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

是否可以为 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返回production2 种类型的构建。

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

4

1 回答 1

1

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

我可以通过编写一个自定义雪包插件来使用.env带有dotenvnpm 包的文件和两个单独的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' };
};
  1. 创建你的 .env 文件；.env.develop和.env.production
  2. 创建你的 snowpack.config 文件；snowpack-develop.config.js和snowpack-production.config.js
  3. 将您的自定义插件添加到两个 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') }],
  ],
};
  1. 最后，添加你的 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 配置文档
Snowpack 插件文档
Snowpack 环境文档

于 2021-02-26T04:44:19.837 回答