首页 >web前端 >js教程 > 正文

Node项目如何配置环境,让其支持可扩展?

转载2021-09-29 19:51:0801043
本篇文章给大家介绍一下配置环境让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

1.png

探索第二步:

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

2.png

探索第三步:

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

  • 思考load两次的作用?

3.png

探索第三步:

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

  • 思考BASE_URL的设置?

0.png

4.png

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

准备webpack项目环境

准备webpack.config.js

5.png

新增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;

查看输出结果

6.png

结尾说明:

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

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

更多编程相关知识,请访问:编程教学!!

以上就是Node项目如何配置环境,让其支持可扩展?的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除

  • 相关标签:Node项目 配置环境
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    php怎么分割数组为几部分657
    php怎么删除指定下标的数组值824
    php怎么获取当前方法的参数值729
    推荐视频教程
  • Node.js个人博客项目实战精讲Node.js个人博客项目实战精讲
  • 全栈工程师的Node.js之路全栈工程师的Node.js之路
  • nodejs开发基础教程nodejs开发基础教程
  • Node.js,就该这样学(2021版)Node.js,就该这样学(2021版)
  • Node.js基础教程Node.js基础教程
  • 视频教程分类