小伙伴们国庆开心哈,睡了一天,所以晚上出来学习一下

---

这是一条天真纯洁善良可爱的分割线

---

正文开始.........
env.js 并不复杂
首先我们先贴出来文件的代码

--env.js

'use strict';

const fs = require('fs');
const path = require('path');
const paths = require('./paths');

// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')];

const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
  throw new Error(
    'The NODE_ENV environment variable is required but was not specified.'
  );
}

// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
var dotenvFiles = [
  `${paths.dotenv}.${NODE_ENV}.local`,
  `${paths.dotenv}.${NODE_ENV}`,
  // Don't include `.env.local` for `test` environment
  // since normally you expect tests to produce the same
  // results for everyone
  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
  paths.dotenv,
].filter(Boolean);

// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set.
// https://github.com/motdotla/dotenv
dotenvFiles.forEach(dotenvFile => {
  if (fs.existsSync(dotenvFile)) {
    require('dotenv').config({
      path: dotenvFile,
    });
  }
});

// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
// https://github.com/facebookincubator/create-react-app/issues/253.
// It works similar to `NODE_PATH` in Node itself:
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
const appDirectory = fs.realpathSync(process.cwd());
process.env.NODE_PATH = (process.env.NODE_PATH || '')
  .split(path.delimiter)
  .filter(folder => folder && !path.isAbsolute(folder))
  .map(folder => path.resolve(appDirectory, folder))
  .join(path.delimiter);

// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in Webpack configuration.
const REACT_APP = /^REACT_APP_/i;

function getClientEnvironment(publicUrl) {
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        // Useful for determining whether we’re running in production mode.
        // Most importantly, it switches React into the correct mode.
        NODE_ENV: process.env.NODE_ENV || 'development',
        // Useful for resolving the correct path to static assets in `public`.
        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
        // This should only be used as an escape hatch. Normally you would put
        // images into the `src` and `import` them in code to get their paths.
        PUBLIC_URL: publicUrl,
      }
    );
  // Stringify all values so we can feed into Webpack DefinePlugin
  const stringified = {
    'process.env': Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };

  return { raw, stringified };
}

module.exports = getClientEnvironment;

首先明确env.js的主要目的在于读取env配置文件并将env的配置信息给到全局变量process.env,

首先明确env.js的主要目的在于读取env配置文件并将env的配置信息给到全局变量process.env,

首先明确env.js的主要目的在于读取env配置文件并将env的配置信息给到全局变量process.env,

嗯,重要的话,一定要说三遍

分析:

1.配置文件的优先级问题

运行 npm run start

图一 图二
通过打印加上代码的逻辑,我们不难看出 文档给出的env的file 路径符合实际.
其他命令所使用的配置文件优先级 就不一一测了...

---

2 .env的常用方法,

1.启动协议,端口和地址的变更

image.png

关键词:协议,地址,端口
显然,我们可以通过env配置文件去替换默认的协议端口和地址,
嗯,先实践一下,

首先在项目根目录创建.env.local
然后写下键值对
然后 npm start

image.png image.png image.png

不难看出,很容易我们就替换了项目的端口和协议.

---

2.项目相关key存储

.env还是很有用的.在项目开发上必然可能会使用到一些第三方平台的接口,那么在多人协同开发的时候,key的有效存储就很有必要
首先我们写下如下两个键值对

image.png

嗯, 然后打印一下看看.

image.png

很奇怪是不是,为什么APP_ID没有注入到env中去呢

image.png

看到这里相信大家已经明白了,这里写了一个正则过滤非REACT_APP开头的变量,所以注意我们在定义一个全局变量的时候一定要注意以REACT_APP开头,当然如果哪些同学不是很满意这个设定,可以在env.js中去除filter.当然不是很推荐.

3.env的扩展使用想法

1.封装开发环境.
思路:封装 启动命令,读取指定env..读取指定配置文件,(有空再详细些)
2.静态资源的统一引入,在多人开发的时候.

---

好了,env,js的相关使用就写到这里了...
睡觉了,睡觉了.
送上最近在看的三体中的一段比较喜欢的句子

看着她捧着酒杯那天真的样子，罗辑心中最柔软的部分被触动了。让她喝酒她就喝，她相信这个世。界，对它没有一点戒心，是的，整个世界到处都潜伏着对她的伤害，只有这里没有，她需要这里的呵护，这是她的城堡