配置环境让Node项目支持可扩展性的办法

lxf2023-03-12 13:50:01

首页 > JavaScript
> 正文

本文给大家介绍一下配置环境让Node项目支持可扩展性的办法，希望能帮助到大家！

因Node项目实施的偏少没牵涉到系统变量转换，可是常做前端项目开发设计总会碰到，例如在Vue项目能够配备.env.xxx.xxx同时要求系统变量配置应以VUE_APP_开始，Why？，大家就一下去探寻一下Vue工程项目的系统变量是如何载入并分析的，咱们就迁移到Node工程中。【强烈推荐学习培训：《nodejs 教程》】

探寻Vue中环境配置的载入：

来看一下Vue CLI有关方式和系统变量的解释，我们可以看到有这样一段话：想要了解更多分析自然环境文档标准的小细节，请见 dotenv。大家也应用 dotenv-expand 来达到自变量拓展 (Vue CLI 3.5 适用)。大家首先用Vue Cli来创建一个Vue新项目。

探寻第一步：

在package.json中以实行scripts的命令都采用到@vue/cli-service包

配置环境让Node项目支持可扩展性的办法

探寻第二步：

@vue/cli-service包的确装上官方网站提醒的两大架包，并且在bin目录下的vue-cli-service.js文档中找到了重要类Service。

配置环境让Node项目支持可扩展性的办法

探寻第三步：

在Service中找到载入环境配置的关键所在函数公式，在其中的两大path各自指:.env.mode和.env.mode.local，也就是大家的系统变量文档能够支持带.local还可以没有。
思索load几次的功效？

配置环境让Node项目支持可扩展性的办法

探寻第三步：

指定作为前缀是什么原因？大家在util目录下找到回答：resolveClientEnv.js，最后是通过DefinePlugin软件载入到全局性配备中。
思索BASE_URL设置？

配置环境让Node项目支持可扩展性的办法

为带上webpack的Node工程中提升环境配置

提前准备webpack项目自然环境

提前准备webpack.config.js

配置环境让Node项目支持可扩展性的办法

新增加env-helper.js，我们一起来完成一下：

必不可少依靠装一下

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项目支持可扩展性的办法