react-create-app项目解析一 package.json

执行npx create-react-app my-app创建项目，再执行npm run eject

package.json如下

{
	"name": "counter",
	"version": "0.0.1",
	"private": true,
	"homepage": "./",
	"devDependencies": {
		"enzyme": "^3.11.0",
		"enzyme-adapter-react-16": "^1.15.2"
	},
	"dependencies": {
		"@babel/core": "7.12.3",
		"@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
		"@svgr/webpack": "5.5.0",
		"@typescript-eslint/eslint-plugin": "^4.5.0",
		"@typescript-eslint/parser": "^4.5.0",
		"babel-eslint": "^10.1.0",
		"babel-jest": "^26.6.0",
		"babel-loader": "8.1.0",
		"babel-plugin-named-asset-import": "^0.3.7",
		"babel-preset-react-app": "^10.0.0",
		"bfj": "^7.0.2",
		"camelcase": "^6.1.0",
		"case-sensitive-paths-webpack-plugin": "2.3.0",
		"css-loader": "4.3.0",
		"dotenv": "8.2.0",
		"dotenv-expand": "5.1.0",
		"eslint": "^7.11.0",
		"eslint-config-react-app": "^6.0.0",
		"eslint-plugin-flowtype": "^5.2.0",
		"eslint-plugin-import": "^2.22.1",
		"eslint-plugin-jest": "^24.1.0",
		"eslint-plugin-jsx-a11y": "^6.3.1",
		"eslint-plugin-react": "^7.21.5",
		"eslint-plugin-react-hooks": "^4.2.0",
		"eslint-plugin-testing-library": "^3.9.2",
		"eslint-webpack-plugin": "^2.5.2",
		"file-loader": "6.1.1",
		"fs-extra": "^9.0.1",
		"html-webpack-plugin": "4.5.0",
		"identity-obj-proxy": "3.0.0",
		"jest": "26.6.0",
		"jest-circus": "26.6.0",
		"jest-resolve": "26.6.0",
		"jest-watch-typeahead": "0.6.1",
		"mini-css-extract-plugin": "0.11.3",
		"optimize-css-assets-webpack-plugin": "5.0.4",
		"pnp-webpack-plugin": "1.6.4",
		"postcss-flexbugs-fixes": "4.2.1",
		"postcss-loader": "3.0.0",
		"postcss-normalize": "8.0.1",
		"postcss-preset-env": "6.7.0",
		"postcss-safe-parser": "5.0.2",
		"prompts": "2.4.0",
		"prop-types": "^15.7.2",
		"react": "^17.0.2",
		"react-app-polyfill": "^2.0.0",
		"react-dev-utils": "^11.0.3",
		"react-dom": "^17.0.2",
		"react-redux": "^7.2.0",
		"react-refresh": "^0.8.3",
		"redux": "^4.0.5",
		"resolve": "1.18.1",
		"resolve-url-loader": "^3.1.2",
		"sass-loader": "^10.0.5",
		"semver": "7.3.2",
		"style-loader": "1.3.0",
		"terser-webpack-plugin": "4.2.3",
		"ts-pnp": "1.2.0",
		"url-loader": "4.1.1",
		"webpack": "4.44.2",
		"webpack-dev-server": "3.11.1",
		"webpack-manifest-plugin": "2.2.0",
		"workbox-webpack-plugin": "5.1.4"
	},
	"scripts": {
		"start": "node scripts/start.js",
		"build": "node scripts/build.js",
		"test": "node scripts/test.js --env=node"
	},
	"browserslist": [
		">0.2%",
		"not dead",
		"not ie <= 11",
		"not op_mini all"
	],
	"jest": {
		"roots": [
			"<rootDir>/src"
		],
		"collectCoverageFrom": [
			"src/**/*.{js,jsx,ts,tsx}",
			"!src/**/*.d.ts"
		],
		"setupFiles": [
			"react-app-polyfill/jsdom"
		],
		"setupFilesAfterEnv": [
			"<rootDir>/src/setupTests.js"
		],
		"testMatch": [
			"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
			"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
		],
		"testEnvironment": "jsdom",
		"testRunner": "/Users/fanpaopao/Documents/Project/源码/Redux/counter/node_modules/jest-circus/runner.js",
		"transform": {
			"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
			"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
			"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
		},
		"transformIgnorePatterns": [
			"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
			"^.+\\.module\\.(css|sass|scss)$"
		],
		"modulePaths": [],
		"moduleNameMapper": {
			"^react-native$": "react-native-web",
			"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
		},
		"moduleFileExtensions": [
			"web.js",
			"js",
			"web.ts",
			"ts",
			"web.tsx",
			"tsx",
			"json",
			"web.jsx",
			"jsx",
			"node"
		],
		"watchPlugins": [
			"jest-watch-typeahead/filename",
			"jest-watch-typeahead/testname"
		],
		"resetMocks": true
	},
	"babel": {
		"presets": [
			"react-app"
		]
	},
	"eslintConfig": {
		"extends": "react-app"
	}
}

name	counter	项目名称
version	0.0.1	项目版本
private	true	npm将拒绝发布它，这是防止私人存储库意外发布的一种方法
homepage	./	设置应用的跟路径
devDependencies		开发环境的依赖
enzyme		测试react
enzyme-adapter-react-16		允许你将 Enzyme 与一组特定的React版本一起使用。这里将使用 React 16.x
dependencies		用户发布环境依赖
@babel/core		我们使用Bable进行转码的核心npm包
@pmmmwh/react-refresh-webpack-plugin		热重载
@svgr/webpack		SVGR 的 Webpack 加载器
@typescript-eslint/eslint-plugin		这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范
@typescript-eslint/parser		ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码
babel-eslint
babel-jest
babel-loader
babel-plugin-named-asset-import
babel-preset-react-app
bfj		JSON 数据集的异步流式处理函数
camelcase
case-sensitive-paths-webpack-plugin
css-loader
dotenv		将环境变量中的变量从 .env 文件加载到 process.env 中
dotenv-expand		dotenv-expand 在 dotenv之上添加变量扩展
eslint
eslint-config-react-app
eslint-plugin-flowtype
eslint-plugin-import
eslint-plugin-jest
eslint-plugin-jsx-a11y
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-testing-library
eslint-webpack-plugin
file-loader
fs-extra		模块是系统fs模块的扩展，提供了更多便利的 API，并继承了fs模块的 API
html-webpack-plugin		为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题。可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
identity-obj-proxy
jest
jest-circus
jest-resolve
jest-watch-typeahead
mini-css-extract-plugin
optimize-css-assets-webpack-plugin
pnp-webpack-plugin		Pnp实际是yarn的一个特性，所以说如果你的项目中不使用yarn构建，那就可以不用使用这个插件。
postcss-flexbugs-fixes
postcss-loader
postcss-normalize
postcss-preset-env
postcss-safe-parser
prompts
prop-types
react
react-app-polyfill
react-dev-utils		从页面上识别react组件，直接跳转到本地代码片段上（开发环境下的一个工具模块）
react-dom
react-redux
react-refresh
redux
resolve
resolve-url-loader
sass-loader
semver
style-loader
browserslist	[ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ]	在你的项目中提供共享的浏览器支持信息。 比如我们项目构建的时候一般会用到babel，postCss等等，提供了对应的浏览器信息后，他们就会针对浏览器信息采取不同的编译策略。

//TODO ....后面更新