{
"name": "fs",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"serve": "vite preview"
},
"dependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
},
"devDependencies": {
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@vitejs/plugin-react": "^1.0.0",
"typescript": "^4.3.2",
"vite": "^2.6.4",
"@typescript-eslint/eslint-plugin": "^5.3.0",
"@typescript-eslint/parser": "^5.3.0",
"eslint": "^8.1.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-prettier": "^4.0.0",
"prettier": "^2.4.1"
}
}
上图是一个Vite创建的React-TS项目的package.json文件内的内容，发现里面的dependencies和devDependencies字段看名字很相似，而且内部都是包内容相关的东西，那么这两者有什么不同呢？
先说结论:devDependencies开发环境使用，也就是我们本地使用
dependencies生产环境使用，线上或者测试环境。
举例说明
本地运行代码的时候，我们是用TypeScript代码，但是本地的环境是没办法运行TS代码，这时候借助webpack等打包工具来将它转化成JS代码，那么你就需要类似babel的东西。有的时候你引入的包需要TS版本，那么你就引入'@types/react'这种类似的包。你想让自己写的代码很规范，你需要有工具来在本地校验的你代码，这时候你引入eslint。所以类似这种在本地帮助你能够开发或者更好开发的东西，都是安装在devDependencies，他们仅仅是在本地运行就可以。
关于生产环境你要明白，生产环境跑的代码是怎样的代码，是你打包好生成代码(也就是能够在浏览器运行的代码JS)，还有依赖的第三方库React等，这些都是线上环境必须的，因此都是安装在 dependencies下。我们拿eslint举列子，你的代码不规范浏览器能够识别吗？能够的，你要明白，我们的代码是给人看，让机器运行的，机器是不管你的代码规范不规范，生产环境要求的是依赖的东西在就可以，很明显eslint根本不是线上环境所依赖的
yarn和install
那么如何使用yarn和install安装到devDependencies和dependencies呢？
yarn
yarn add xxxx -D // 安装xxx到devDependencies
yarn add xxx // 安装xxx到dependencies
npm
npm install xxxx --save-dev 或者 -D // 安装xxx到devDependencies
npm install xxxx --save 或者 -S // 安装xxx到dependencies
