如何在本地使用/替换 Svelte 组件中的 env 变量答案

【问题标题】：How to use / replace env variable in Svelte component locally如何在本地使用/替换 Svelte 组件中的 env 变量
【发布时间】：2021-09-14 09:13:26
【问题描述】：

我正在 Svelte 中的 .env 文件周围寻找缺失的部分。我只为本地开发使用 env 文件，如下所示：

GRAPHQL_URL=http://localhost:8010/proxy/graphql

在rollup.config.js 中，我想将 env 变量替换为可以在 Svelte 组件中使用的字符串（使用 @Rollup/plugin-replace）：

export default [{
...
    plugins: [
    replace({
      preventAssignment: true,
      GRAPHQL_URL: process.env.GRAPHQL_URL
    })
...

我希望有一个变量GRAPHQL_URL 注入到包中并在一个苗条的文件中可用？像这样：

mycomponent.svelte:

const url = GRAPHQL_URL;
console.log(url); // expect "http://localhost:8010/proxy/graphql"

但我明白了：

Uncaught ReferenceError: process is not defined
    at instanceOf.mjs:11
    at web.js:160

我使用包含rollup -c -w 的npm run dev 进行开发。节点版本 16 和 NPM 版本 7。

我尝试了一些dotenv guides，但没有成功。

【问题讨论】：

【解决方案1】：

您需要对变量进行字符串化，而不是注入进程本身：

GRAPHQL_URL: JSON.stringify(process.env.GRAPHQL_URL)

【讨论】：