环境变量
San CLI 会按照下面的优先级在项目的根目录中读取环境变量:
.env.${mode}.local
.env.${mode}
.env.local
.env
mode 取值范围为
production
和development
。
.env
文件内的格式为每行一个键值对数据,举例如下:
ONE=1
SAN_VAR_TRUE=true
在.env
的键值对 San CLI 会根据优先级进行合并,然后复制给process.env
。例如上面的赋值之后结果是process.env.ONE=1
。.env
文件的读取是在加载san.config.js
之前的,所以在san.config.js
中可以直接使用.env
文件设置的process.env
变量。
注意:对于NODE_ENV
和BABEL_ENV
这两个 webpack 和 Babel 用到的环境变量,如果.env
中不指定,则会根据build
或者serve
命令的--mode
来指定。
环境变量除了上面的功能之外,还可以做一些其他的用法使用,比如在插件中可以使用.env
中指定的环境变量,也可以在前端代码中使用环境变量的赋值。
build
命令中使用远程部署 --remote
的配置项
在san build
命令中,我们可以使用--remote <remote-name>
的方式来将构建结果通过deploy-files插件上传到对应的开发机,方便进行测试和部署。而这里传入的remote-name
实际是一个对应的开发机名称,比如小明的开发机可以配置在在.env.production
中配置一个xiaoming
机器相关的上传数据:
# .env.production
SAN_REMOTE_XIAOMING_RECEIVER=http://www.xiaoming.com:8080/receiver.php
SAN_REMOTE_XIAOMING_TEMPLATE_PATH=/home/work/nginx_static/html/test/template
SAN_REMOTE_XIAOMING_STATIC_PATH=/home/work/nginx_static/html/test/static
SAN_REMOTE_XIAOMING_STATIC_DOMAIN=http://test.bdstatic.com:8888
这样,当我们执行san build --remote xiaoming
的时候会自动去寻找.env.production
的 remote 配置,打包结束后会调用deploy-files
上传数据到自己的开发机。
插件中使用环境变量,也可以按照这个思路来用,因为插件的调用也是在加载
.env
文件之后的。
前端代码中使用环境变量的赋值
在.env
中定义的以SAN_VAR_*
开头的变量会被DefinePlugin
作为变量直接解析成对应的值,即:
# .env 中环境变量设置为
SAN_VAR_HELLO=hello
则在代码中直接使用console.log(HELLO)
会经过编译后会变成console.log('hello')
。
注意:
SAN_VAR_*
的定义不仅仅是在.env
文件中,还可以在其他在打包之前的地方定义,比如在san.config.js
中;- 在代码中可以继续使用类似
process.env.NODE_ENV
这类变量。
常见应用场景举例
- 使用某个常量,需要在线下环境使用不同的变量,例如线下请求的数据接口是后端工程师的一个线下地址,那么可以使用环境变量定义常量;
- 部署代码到自己的开发机,可以将环境变量写到
.env.local
中,并且将该文件添加到.gitignore
中; - 任何需要在打包之前就计算好得到的变量,可以直接在
san.config.js
中直接赋值。