Svelte + Typscriptプロジェクトへの環境変数の追加

私は数週間の間Sveletを使用してプロジェクトをやっています.そして、私は私が適切に修正する方法を見つけ出すために長い時間を費やすようにした単純な問題で私自身を得ました.
あなたがsvelte typescriptプロジェクトで環境変数を加えることを探しているならば.プロジェクトで何も中断せずに行う手順はほとんどありません.
これをアーカイブするには、次の手順に従います.

は、 @rollup/plugin-replace をインストールします

も、あなたの好みとして dotenv または dotenv-safe をインストールします.

フォルダのglobal.d.tsファイルを作成し、以下のスクリプトを追加します.

// at global.d.ts
export {}

declare global {
  var __MY_ENV_VARIABLE__: string
  var __ANOTHER_ENV_VAR__: string
}

置換されたプラグインを追加する

// import it first
import replace from "@rollup/plugin-replace";

// then, add replace function before svelte plugin

...
plugins: [
  replace({
    globalThis: JSON.stringify({
      __MY_ENV_VARIABLE__: "my env variable value",
      __ANOTHER_ENV_VAR__: "another env var value",
    }),
  }),
  svelte({
...

最後に、タイプスクリプトからsrcを使用してこれらの変数にアクセスできます.

const MY_ENV_VARIABLE = globalThis.__MY_ENV_VARIABLE__;
const ANOTHER_ENV_VAR = globalThis.__ANOTHER_ENV_VAR__;

ロールプが束を構築したとき、置換プラグインはrollup.config.jsによってglobalThisとglobalThis.__MY_ENV_VARIABLE__に置き換えられます.
それです.誰かを助けることができることを願っています:)
ハッピーコーディング.