小伙伴們國慶開心哈,睡了一天,所以晚上出來學(xué)習(xí)一下
這是一條天真純潔善良可愛的分割線
正文開始.........
env.js 并不復(fù)雜
首先我們先貼出來文件的代碼
--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.配置文件的優(yōu)先級(jí)問題
運(yùn)行 npm run start
通過打印加上代碼的邏輯,我們不難看出 文檔給出的env的file 路徑符合實(shí)際.
其他命令所使用的配置文件優(yōu)先級(jí) 就不一一測了...
2 .env的常用方法,
1.啟動(dòng)協(xié)議,端口和地址的變更
關(guān)鍵詞:協(xié)議,地址,端口
顯然,我們可以通過env配置文件去替換默認(rèn)的協(xié)議端口和地址,
嗯,先實(shí)踐一下,
首先在項(xiàng)目根目錄創(chuàng)建.env.local
然后寫下鍵值對
然后 npm start
不難看出,很容易我們就替換了項(xiàng)目的端口和協(xié)議.
2.項(xiàng)目相關(guān)key存儲(chǔ)
.env還是很有用的.在項(xiàng)目開發(fā)上必然可能會(huì)使用到一些第三方平臺(tái)的接口,那么在多人協(xié)同開發(fā)的時(shí)候,key的有效存儲(chǔ)就很有必要
首先我們寫下如下兩個(gè)鍵值對
嗯, 然后打印一下看看.
很奇怪是不是,為什么APP_ID沒有注入到env中去呢
看到這里相信大家已經(jīng)明白了,這里寫了一個(gè)正則過濾非REACT_APP開頭的變量,所以注意我們在定義一個(gè)全局變量的時(shí)候一定要注意以REACT_APP開頭,當(dāng)然如果哪些同學(xué)不是很滿意這個(gè)設(shè)定,可以在env.js中去除filter.當(dāng)然不是很推薦.
3.env的擴(kuò)展使用想法
1.封裝開發(fā)環(huán)境.
思路:封裝 啟動(dòng)命令,讀取指定env..讀取指定配置文件,(有空再詳細(xì)些)
2.靜態(tài)資源的統(tǒng)一引入,在多人開發(fā)的時(shí)候.
好了,env,js的相關(guān)使用就寫到這里了...
睡覺了,睡覺了.
送上最近在看的三體中的一段比較喜歡的句子
看著她捧著酒杯那天真的樣子蔚万，羅輯心中最柔軟的部分被觸動(dòng)了。讓她喝酒她就喝，她相信這個(gè)世啸箫。界，對它沒有一點(diǎn)戒心朽肥，是的焦除，整個(gè)世界到處都潛伏著對她的傷害，只有這里沒有虐杯，她需要這里的呵護(hù)，這是她的城堡
