【前端工程化】理解和配置process.env.NODE_ENV，项目中的环境变量到底是个啥
内容预警，初级教程，菜鸟必看，大佬请绕道
1. 前置知识
（1）首先我们都知道package.json是node自带的包描述文件，所以在package.json中配置的内容、环境变量等，都是为node的环境服务的！
（2）在一个工程化的前端项目中，我们有node 环境 + 打包工具的环境（如vite,webpack）+ js（或vue）文件中的环境。
（3）node环境是最基础的
（4）打包工具通常有一个配置文件比如webpack.config.js，在配置文件中可以配置各种变量和打包的语法。
（5）js（或vue）文件，可以应用打包工具配置文件中配置的变量 和 node的变量，但是使用了打包工具后，由于打包工具重写了环境变量，就不能直接使用package.json中定义的环境变量了，webpack.config.js中的优先级大于package.json中的优先级。
2. package.json中配置变量
（1）【mac 电脑】在js文件中使用pacakge.json配置的环境变量
(2)【window 电脑】在package.json中配置环境变量， 需要加一个set
"scripts": {
"dev": "set NODE_ENV=new_env && node test.js"
},所以为了一套代码在mac和window电脑都可以使用，可以使用这个跨平台设置环境变量的npm包cross-env
cross-env - npmRun scripts that set and use environment variables across platforms. Latest version: 7.0.3, last published: 2 years ago. Start using cross-env in your project by running `npm i cross-env`. There are 5340 other projects in the npm registry using cross-env.
https://www.npmjs.com/package/cross-env安装完之后，配置文件变为
"scripts": {
"dev": "cross-env NODE_ENV=new_env node test.js"
},3. 打包工具中配置环境变量
我们使用webpack作为打包工具，安装webpack，之后我们就有了第三个环境 —— 打包工具配置时候的环境。
修改配置文件中的mode的值可以修改打包之后的环境变量，参考webpack官网
模式(Mode)
提供
mode配置选项，告知 webpack 使用相应模式的内置优化。
string = 'production': 'none' | 'development' | 'production'
我们再试一下，同时改变package.json中的变量，打包工具webpack.config.js中的环境变量的优先级更高。
但是我们总不能总是修改webpack.config.js中mode的值，每次打包和开发都修改，很麻烦，还是需要读取package.json中的配置才科学。
webpack.DefinePlugin 设置其他的环境变量
所有的打包工具都可以自定义其他的环境变量供我们开发（js代码）中使用，比如webpack中使用的是DefinePlugin插件，vite使用的是define参数
4. 知识补充
（1）NODE_ENV常用，但不是node自带的环境变量
(2)使用了打包工具，有了配置文件webpack.config.js之后，package.json中配置的其他环境变量，如果没在配置文件webpack.config.js中定义，也不能使用
关于更多package.json的知识可以参考我的文章
【前端工程化】配置package.json中scripts命令脚本，新手必学_我有一棵树的博客-CSDN博客_package.json scripts配置【前端工程化】配置package.json中scripts命令脚本，新手必学https://blog.csdn.net/qq_17335549/article/details/126784270关于package.json 和package-lock.json_我有一棵树的博客-CSDN博客_package-lock.json和package.json每日鸡汤，每个你想要学习的念头都是未来的你向自己求救一直在纠结，每次pull 完代码之后重新install ， package-lock.json就改变了，那么我改完代码之后需要把这个package-lock.json提交么？让我们先来来看看package.json每个包前面的^ 代表 大版本的依赖包^1.2.3中的1～ 代表次要版本号 ~1.2.3中的2如果什么符号都不加则是指定版本，这也就是说的锁定版本，好处是避免包更新带来的bug指定安装版本npm install xx@1..
https://blog.csdn.net/qq_17335549/article/details/116699339