vite技术揭秘--环境变量

前言

    我们开发中不可避免的要根据环境变量来做一些逻辑分支，在vite中有两种实现方式，即define和.env文件

示例

    通过cross-env包设置环境变量，并通过define向页面中export

    在.env中使用VITE_作为开头命名

源码

    define

        读取配置的整体流程和proxy差不多，这里就不展开说了，总之就是，能拿到vite.config.js中的配置

        开发环境

            对于开发环境vite并不会进行编译，而是将其挂载到全局，我们知道，定义在后的script标签是能够访问上一个script中定义的变量的，就像下边这样

            为了避免变量名称冲突导致报错，故挂载到window最合适

            那么，需要单独创建script标签吗？可以，但不必要！因为vite已经向浏览器塞了个client.js了，直接利用其作为载体即可，这里将define中定义的配置项转换成字符串，并对原代码中的占位标识（__DEFINES__）作替换

            最后，当浏览器加载到client.js时，直接将__DEFINES__的值挂载到window即可

        非开发环境

            非开发环境会使用plugin对源码中使用到的变量做替换操作：

                将我们的配置转换为正则表达式

                对源码作匹配替换

    env文件

        读取配置

            本质上，该文件也属于配置项，故也在resolveConfig中进行拉取

            对于loadEnv函数，接收的三个参数分别为：当前运行环境（devlepment or production）、是否配置是env的目录（默认根目录下）、是否设置了前缀（默认以VITE_开头）

            然后借助dotenv包对文件内容做解析

            最后将解析到的值挂载到env对象上并返回

        挂载