ホームページ > ウェブフロントエンド > jsチュートリアル > スケーラビリティをサポートするように Node プロジェクト環境を構成するにはどうすればよいですか?

スケーラビリティをサポートするように Node プロジェクト環境を構成するにはどうすればよいですか?

青灯夜游
リリース: 2021-11-02 09:03:16
転載
2847 人が閲覧しました

この記事では、Node プロジェクトをスケーラブルな方法でサポートするための構成環境を紹介します。

スケーラビリティをサポートするように Node プロジェクト環境を構成するにはどうすればよいですか?

環境変数の切り替えを必要としない Node プロジェクトの開発はほとんどありませんが、フロントエンド プロジェクトの開発を行う場合には常に環境変数の切り替えが発生するためです。 Vue プロジェクトの .env.xxx.xxx であり、VUE_APP_ で始まるように環境変数を設定する必要があります。なぜですか?では、Vue プロジェクトの環境変数がどのように読み込まれて解析されるかを一緒に調べてから、それらを Node プロジェクトに移植してみましょう。 [推奨される学習: 「nodejs チュートリアル 」]

Vue での環境設定の読み込みを調べます:

最初に見てみましょう Vue CLI モードと環境変数の説明に関して、次の段落がありました。環境ファイルの解析ルールの詳細を知りたい場合は、dotenv を参照してください。また、dotenv-expand を使用して変数展開を実装します (Vue CLI 3.5 はサポートします)。まず、Vue Cli を使用して Vue プロジェクトを作成します。

最初のステップを確認します:

package.jsonscripts を実行します。 @vue/cli-service package

スケーラビリティをサポートするように Node プロジェクト環境を構成するにはどうすればよいですか?

##2 番目のステップを検討します:

@vue/cli-service パッケージは、公式 Web サイトによって要求された 2 つの依存関係パッケージと、vue-cli-service を bin ディレクトリにインストールします。クラス Service が js ファイルで見つかりました。

スケーラビリティをサポートするように Node プロジェクト環境を構成するにはどうすればよいですか?

3 番目のステップを検討します:

  • Service# 内## では、環境設定をロードするための重要な関数が見つかりました。2 つの path は、それぞれ .env.mode.env.mode.local を参照しています。つまり、環境変数ファイルは .local をサポートできるかどうかということです。

  • load

    の役割について 2 回考えてみませんか?

スケーラビリティをサポートするように Node プロジェクト環境を構成するにはどうすればよいですか?

3 番目のステップを検討します:

    指定されたプレフィックスはどうなったのでしょうか?答えは
  • util

    ディレクトリにあります: resolveClientEnv.js。これは最終的に DefinePlugin プラグインによってグローバル設定にロードされます。

  • BASE_URL

    の設定について考えていますか?

スケーラビリティをサポートするように Node プロジェクト環境を構成するにはどうすればよいですか?

スケーラビリティをサポートするように Node プロジェクト環境を構成するにはどうすればよいですか?#webpack を含むノード プロジェクトに環境設定を追加します

#webpack プロジェクト環境の準備

#webpack.config.js の準備

##env-helper.js を追加し、一緒に実装しましょう:

スケーラビリティをサポートするように Node プロジェクト環境を構成するにはどうすればよいですか?

必要な依存関係をインストールします

npm install dotenv --save
npm install dotenv-expand --save
ログイン後にコピー

環境変数ファイルの解析

/**
 * 解析环境变量文件
 * @param {*} mode
 */
const loadEnv = (mode) => {
  const basePath = path.resolve(__dirname, `.env${mode ? `.${mode}` : ``}`);
  const localPath = `${basePath}.local`;

  const load = (envPath) => {
    try {
      const env = dotenv.config({ path: envPath, debug: process.env.DEBUG });
      dotenvExpand(env);
    } catch (err) {
      if (err.toString().indexOf("ENOENT") < 0) {
        console.error(err);
      }
    }
  };

  load(localPath);
  load(basePath);
};
ログイン後にコピー

プレフィックスに一致する環境変数オブジェクト

通常の条件と特殊な条件を統合した後、

DefinePlugin プラグイン。

/**
 * 获取符合前缀规则的环境变量对象
 */
const prefixRE = /^XXTX_APP_/;
const resolveClientEnv = () => {
  const env = {};
  Object.keys(process.env).forEach((key) => {
    if (prefixRE.test(key) || key === "NODE_ENV") {
      env[key] = process.env[key];
    }
  });
  return env;
};
ログイン後にコピー

環境変数の読み取りをデモするために webpack.config.js をアップグレードします

デモンストレーション プラグインと NODE_ENV 構成を追加します

const webpack = require("webpack");
const { loadEnv, resolveClientEnv } = require("./env-helper");
// 解析环境配置文件
// 通过cross-env 再scripts中配置NODE_ENV=development
loadEnv(process.env.NODE_ENV);
// 获取符合规则的环境配置对象
const env = resolveClientEnv();

const HelloWorldPlugin = require("./hello-world");

module.exports = {
  mode: "development",
  plugins: [
    new webpack.DefinePlugin(env),
    new HelloWorldPlugin({ options: true }),
  ],
};
ログイン後にコピー

Webpack プラグインで環境変数を使用する

#

class HelloWorldPlugin {
  apply(compiler) {
    compiler.hooks.done.tap("HelloWorldPlugin", () => {
      console.log("Hello World!");
      console.log("[ XXTX_APP_NAME ] >", process.env.XXTX_APP_NAME);
      console.log("[ XXTX_APP_BASE_URL ] >", process.env.XXTX_APP_BASE_URL);
    });
  }
}

module.exports = HelloWorldPlugin;
ログイン後にコピー
#出力を表示

#エンディングノート:

スケーラビリティをサポートするように Node プロジェクト環境を構成するにはどうすればよいですか?env-helper.js

を他の

Node## に移植できます。構成のマウント方法はプロジェクト内で変更できます。
  • 今回のコードは完全に CV メソッドに依存しています。学習しましたか?

  • プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 !

    以上がスケーラビリティをサポートするように Node プロジェクト環境を構成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    関連ラベル:
    ソース:juejin.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート