packageJson和环境变量的使用

1.packJson参数介绍

package.json文件形式上就是一个JSON对象 ， 定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证、如何启动项目、运行脚步等元数据） 。 执行npm install命令根据这个配置文件，自动下载所需的模块 。

常见的字段：

1. name：包的名字( 必须字段 )，import xxx from ‘包名’
2. version：包的版本，每次改动后重新上传npm官网，需要更换版本号
3. main： 可选字段， 指定了项目加载的入口文件 ，不写默认找index.js
4. scripts：我们常说的执行的脚本，以key:value的形式，常见的start: xxx 我们就可以npm run start
5. dependencies、devDependencies： dependencies字段指定了项目运行所依赖的模块 ， devDependencies指定项目开发所需要的模块 。

2.重点介绍下script属性

每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令 。在我们日常开发中，使用vite，vue-cli构建项目，就已经生成了基本的运行脚本和打包脚本。但你还可以在script里面写 所有支持的命令，node xxx.js, vue-cli-service serve ，npm run serve，甚至你还能mkdir 文件等等。

1. 向 npm 脚本传入参数

   --符号来表示传参，通过--mode来告诉 webpack 在构建时使用哪种模式

   "scripts": {
     "build": "webpack --mode production"
   }
   

2. 设置环境变量

   项目到生产，测试

   
   "scripts": {
      "server": "set NODE_ENV=production webpack-dev-server"
   }
   
   

3. 多个命令执行

   异步执行用&符号 ， 同步执行使用&&符号 。

   "scripts": {
     "runjs": "npm run index1.js & npm run index2.js"
     "runjsasync": "npm run index1.js && npm run index2.js"
   }
   

3.环境变量

​ 在前端工程中，环境变量通常用于配置应用程序的行为，包括开发、测试和生产环境。这些环境变量可以根据应用程序运行的环境不同而动态设置，以便应用程序能够适应不同的部署环境。

​ 前端工程中我们都会时常见到.env文件，env文件就是我们用来管理环境变量的。那么我们日常开发中，怎么来区分dev,test,production环境呢？

1. 直接在script中多写几条命令匹配好就行

   "scripts": {
      "dev": "cross-env NODE_ENV=dev webpack-dev-server"
      "test": "cross-env NODE_ENV=test webpack-dev-server"
   }
   

   这里使用cross-env而不用set，cross-env是个npm包，解决不同操作系统（set用于window系统下设置环境变量，export是linux的风格）写法不统一。

2. 用.env.development和.env.production将每个环境所需的环境的变量分开来写

   vue-cli的项目使用 process.env就能访问到 .env文件的环境变量

   vite中需要用 import.meta.env 也能访问到

   webpack 本身并不会自动加载 .env 文件或者将其中定义的环境变量注入到构建过程中，因此我们需要借助 dotenv 这样的库来实现这个功能。vue-cli，vite中也是读不到的 只不过他们自己封装过不需要在引入这个包。

   引入了dotenv后 还需要require(‘dotenv’).config() 才能正常读取