這篇文章主要為大家展示了“Node項(xiàng)目怎么配置環(huán)境并讓其支持可擴(kuò)展”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Node項(xiàng)目怎么配置環(huán)境并讓其支持可擴(kuò)展”這篇文章吧。

專業(yè)從事成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè),高端網(wǎng)站制作設(shè)計(jì),微信小程序定制開(kāi)發(fā),網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊(duì)竭力真誠(chéng)服務(wù)，采用H5技術(shù)+CSS3前端渲染技術(shù)，響應(yīng)式網(wǎng)站建設(shè)，讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過(guò)程建立專項(xiàng)小組，與您實(shí)時(shí)在線互動(dòng)，隨時(shí)提供解決方案，暢聊想法和感受。

因Node項(xiàng)目開(kāi)發(fā)的較少?zèng)]涉及到環(huán)境變量切換，但是經(jīng)常做前端項(xiàng)目開(kāi)發(fā)總是會(huì)遇到，比如在Vue的項(xiàng)目可以配置.env.xxx.xxx并要求環(huán)境變量的配置要以VUE_APP_開(kāi)頭，Why？，我們就一起來(lái)探索一下Vue項(xiàng)目的環(huán)境變量是怎么加載并解析的，我們?cè)僖浦驳絅ode項(xiàng)目中。

探索Vue中環(huán)境配置的加載：

先來(lái)看看Vue CLI關(guān)于模式和環(huán)境變量的說(shuō)明，我們看到有這么一段話：想要了解解析環(huán)境文件規(guī)則的細(xì)節(jié)，請(qǐng)參考 dotenv。我們也使用 dotenv-expand 來(lái)實(shí)現(xiàn)變量擴(kuò)展 (Vue CLI 3.5+ 支持)。我們先用Vue Cli來(lái)創(chuàng)建一個(gè)Vue項(xiàng)目。

探索第一步：

在package.json中通過(guò)執(zhí)行scripts的命令都使用到了@vue/cli-service包

探索第二步：

@vue/cli-service包確實(shí)安裝了官網(wǎng)提示的兩個(gè)依賴包，并在bin目錄下的vue-cli-service.js文件中找到了關(guān)鍵類Service。

探索第三步：

• 在Service中我們找到了加載環(huán)境配置的關(guān)鍵函數(shù)，其中的兩個(gè)path分別指:.env.mode和.env.mode.local，也就是我們的環(huán)境變量文件可以支持帶.local也可以不帶。

• 思考load兩次的作用？

探索第三步：

• 指定的前綴是怎么回事？我們?cè)?code>util目錄下找到了答案：resolveClientEnv.js，最終是由DefinePlugin插件加載到了全局的配置中。

• 思考BASE_URL的設(shè)置？

為攜帶webpack的Node項(xiàng)目中增加環(huán)境配置

準(zhǔn)備webpack項(xiàng)目環(huán)境

準(zhǔn)備webpack.config.js

新增env-helper.js，我們一起來(lái)實(shí)現(xiàn)一下：

必備依賴裝一下

npm install dotenv --save
npm install dotenv-expand --save

解析環(huán)境變量文件

/**
 * 解析環(huán)境變量文件
 * @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);
};

符合前綴的環(huán)境變量對(duì)象

將符合正則條件的和特殊的進(jìn)行整合后返回，通過(guò)注入到DefinePlugin插件中。

/**
 * 獲取符合前綴規(guī)則的環(huán)境變量對(duì)象
 */
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;
};

升級(jí)webpack.config.js來(lái)演示環(huán)境變量讀取

增加演示插件和NODE_ENV配置

const webpack = require("webpack");
const { loadEnv, resolveClientEnv } = require("./env-helper");
// 解析環(huán)境配置文件
// 通過(guò)cross-env 再scripts中配置NODE_ENV=development
loadEnv(process.env.NODE_ENV);
// 獲取符合規(guī)則的環(huán)境配置對(duì)象
const env = resolveClientEnv();

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

module.exports = {
  mode: "development",
  plugins: [
    new webpack.DefinePlugin(env),
    new HelloWorldPlugin({ options: true }),
  ],
};

在我們的webpack插件中使用環(huán)境變量

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;

查看輸出結(jié)果

以上是“Node項(xiàng)目怎么配置環(huán)境并讓其支持可擴(kuò)展”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：Node項(xiàng)目怎么配置環(huán)境并讓其支持可擴(kuò)展
當(dāng)前路徑：http://www.yijiale78.com/article18/jjpcgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)、網(wǎng)站改版、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)