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包

探索第二步：

@vue/cli-service包确实安装了官网提示的两个依赖包，并在bin目录下的vue-cli-service.js文件中找到了关键类Service。

探索第三步：

• 在Service中我们找到了加载环境配置的关键函数，其中的两个path分别指:.env.mode和.env.mode.local，也就是我们的环境变量文件可以支持带.local也可以不带。

• 思考load两次的作用？

探索第三步：

• 指定的前缀是怎么回事？我们在util目录下找到了答案：resolveClientEnv.js，最终是由definePlugin插件加载到了全局的配置中。

• 思考BASE_URL的设置？

为携带webpack的Node项目中增加环境配置

准备webpack项目环境

准备webpack.config.js

新增env-helPEr.js，我们一起来实现一下：

必备依赖装一下

npm install dotenv --savenpm 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=developmentloadEnv(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;
    

查看输出结果

结尾说明：

• 我们可以将env-helper.js移植到其他的Node项目中只是挂载配置的方式更改即可。

• 此次的代码全靠CV大法，你学到了吗？

更多编程相关知识，请访问：编程教学！！

以上就是Node项目如何配置环境，让其支持可扩展？的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！