废话不多说，上菜！！！
搞一手dotenv的代码：
git clone https://github.com/motdotla/dotenv.git
# npm i -g yarn
cd dotenv && yarn i
dotenv的作用就是将.env文件中的变量放入process.env中
接下来看一下我们常用.env文件，大概猜测下dotenv到底干了什么
// .env
NODE_ENV=development
URL='http://xxx.cn'
- 首先要获取文件内容
- 解析文件内容（类似于key=value）
- 将解析内容遍历放进process.env内
来看源码：
const fs = require('fs')
const path = require('path')
const os = require('os')
function log (message /*: string */) {
console.log(`[dotenv][DEBUG] ${message}`)
}
const NEWLINE = '\n'
const RE_INI_KEY_VAL = /^\s*([\w.-]+)\s*=\s*(.*)?\s*$/
const RE_NEWLINES = /\\n/g
const NEWLINES_MATCH = /\r\n|\n|\r/
// Parses src into an Object
function parse (src /*: string | Buffer */, options /*: ?DotenvParseOptions */) /*: DotenvParseOutput */ {
const debug = Boolean(options && options.debug)
const obj = {}
// convert Buffers before splitting into lines and processing
src.toString().split(NEWLINES_MATCH).forEach(function (line, idx) {
// matching "KEY' and 'VAL' in 'KEY=VAL'
const keyValueArr = line.match(RE_INI_KEY_VAL)
// matched?
if (keyValueArr != null) {
const key = keyValueArr[1]
// default undefined or missing values to empty string
let val = (keyValueArr[2] || '')
const end = val.length - 1
const isDoubleQuoted = val[0] === '"' && val[end] === '"'
const isSingleQuoted = val[0] === "'" && val[end] === "'"
// if single or double quoted, remove quotes
if (isSingleQuoted || isDoubleQuoted) {
val = val.substring(1, end)
// if double quoted, expand newlines
if (isDoubleQuoted) {
val = val.replace(RE_NEWLINES, NEWLINE)
}
} else {
// remove surrounding whitespace
val = val.trim()
}
obj[key] = val
} else if (debug) {
log(`did not match key and value when parsing line ${idx + 1}: ${line}`)
}
})
return obj
}
function resolveHome (envPath) {
return envPath[0] === '~' ? path.join(os.homedir(), envPath.slice(1)) : envPath
}
// Populates process.env from .env file
function config (options /*: ?DotenvConfigOptions */) /*: DotenvConfigOutput */ {
let dotenvPath = path.resolve(process.cwd(), '.env')
let encoding /*: string */ = 'utf8'
let debug = false
if (options) {
if (options.path != null) {
dotenvPath = resolveHome(options.path)
}
if (options.encoding != null) {
encoding = options.encoding
}
if (options.debug != null) {
debug = true
}
}
try {
// specifying an encoding returns a string instead of a buffer
const parsed = parse(fs.readFileSync(dotenvPath, { encoding }), { debug })
Object.keys(parsed).forEach(function (key) {
if (!Object.prototype.hasOwnProperty.call(process.env, key)) {
process.env[key] = parsed[key]
} else if (debug) {
log(`"${key}" is already defined in \`process.env\` and will not be overwritten`)
}
})
return { parsed }
} catch (e) {
return { error: e }
}
}
module.exports.config = config
module.exports.parse = parse
代码挺长，主要看parsed方法大概意思就是在处理获取的文件内容，将转化为一个对象
config方法就是获取文件内容，将parsed方法妆花的对象进行遍历遍历赋值给process.env，返回对象
都这儿了，那浏览器怎么访问到环境变量呢，process.env只在的node环境中，此时就需要做一些操作，在构建时将环境变量在别地方再存一份
webpack 的 DefinePlugin，dotenv-webpack二者做了差不多的事，具体实现思路就是构建时将process.env的内容copy一份，便于区分直接以'process.env.xxx'为key，将对应值进行赋值
有兴趣的可以看下dotenv-webpack源码，它是结合了dotenv和webpack的DefinePlugin开发的
