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文件中引入的外部资源如 | |
| 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 ....后面更新