Skip to content

Latest commit

 

History

History
195 lines (186 loc) · 11.5 KB

依赖清单.md

File metadata and controls

195 lines (186 loc) · 11.5 KB

这个文件用来记录用到的第 3 方包和一些配置文件的作用

package.json

{
  "name": "react_luo",					// 项目名字
  "version": "1.0.0",				 	// 项目版本
  "description": "react脚手架,最新技术",		   	// 项目简介
  "main": "index.js",					// 项目入口,没用,因为配置了server.js
  "scripts": {						// 自定义的脚本
    "start": "node server.js",				// 启动开发环境
    "build": "webpack -p --config webpack.production.config.js --progress --profile --colors --display errors-only", // 正式打包
    "dist": "set NODE_ENV=production&& node server.js",				// 运行打包后的build文件夹下的代码
    "prettier": "prettier --write \"{src,mock}/**/*.{js,css,scss,less}\"",	// 一键格式化src目录,mock目录下的代码
    "cover": "./node_modules/.bin/istanbul cover _mocha",			// 第3方测试库,不用管
    "coveralls": "npm run cover -- --report lcovonly && cat ./coverage/lcov.info | ./node_modules/.bin/coveralls" // 第3方测试库
  },
  "author": "luo",		// 作者名字
  "license": "ISC",		// 开源协议
  "private": true,		// 是否私有,没用,因为不是发布npm包
  "repository": {		// 源代码信息
    "type": "git",		// 这是一个git存储的项目
    "url": "git+https://github.com/javaLuo/react-luo.git" // 源代码地址
  },
  "dependencies": {				// 项目依赖包
    "@rematch/core": "^1.1.0", 			// redux中间件,按model划分,类似dva或vuex,但比dva轻量
    "antd": "^3.4.1",				// 蚂蚁金服UI组件库
    "axios": "^0.18.0",				// 封装了fetch的异步请求库
    "core-js": "^3.1.4",    			// 代替babel-polyfill,使浏览器支持ES6+新功能
    "lodash": "^4.17.5",			// 常用工具库(深拷贝等)
    "moment": "^2.22.1",			// 时间对象,antd用的这个,实际开发中可能会用到
    "react": "^16.3.2",				// react核心
    "react-dom": "^16.3.2",			// react Dom操作工具库(render函数等)
    "react-loadable": "^5.3.1",			// 代码分割按需加载插件
    "react-redux": "^5.0.7",			// react与redux连接的桥梁,挂载组件,同步状态
    "react-router-dom": "^4.2.2",		// react前端路由(现在的版本不再需要react-router)
    "redux": "^4.0.0",				// redux核心 状态管理
  },
  "devDependencies": {						// 开发依赖包
    "@babel/core": "^7.1.2",  					// babel核心,编译ES6+新语法
    "@babel/plugin-proposal-class-properties": "^7.1.0",	// Babel插件 - 用于让class类中支持定义箭头函数的语法
    "@babel/plugin-proposal-decorators": "^7.1.2",		// Babel插件 - 支持修饰器语法 Decorator
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",	// Babel插件 - 支持对象的扩展运算符
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",		// Babel插件 - 支持异步import语法,代码分割需要
    "@babel/plugin-transform-runtime": "^7.1.0",		// Babel插件 - 所有的垫片函数将引用babel-runtime中的,避免重复编译
    "@babel/preset-env": "^7.1.0",				// Babel根据浏览器和运行时环境自动识别运用哪些垫片库来兼容ES6+语法
    "@babel/preset-react": "^7.0.0",				// Babel支持react语法
    "@babel/runtime": "^7.1.2",					// Babel运行时垫片库,提供了各种ES6的垫片,最终会自动编译为ES5

    "autoprefixer": "^8.3.0",					// postCSS插件,自动添加CSS前缀等
    "babel-eslint": "^8.x",					// 适配babel ES6+的eslint规范插件
    "babel-loader": "^8.0.4",					// Webpack解析器 - 解析JS ES6+ 新语法
    "babel-plugin-import": "^1.10.0",				// Babel插件 - 按需加载,用于antd
    "body-parser": "^1.18.3",					// server.js有用,解析post请求的body数据
    "clean-webpack-plugin": "^0.1.19",				// Webpack插件 - 每次打包时自动删除上一次打包留下的旧代码
    "copy-webpack-plugin": "^4.5.4",				// 打包时将public中的文件直接拷贝到最终文件夹
    "css-loader": "^0.28.11",					// Webpack解析器 - 用于解析js中import的css,和css中url()的路径
    "eslint": "^4.19.1",					// Eslint 代码规范检测器
    "eslint-loader": "^2.0.0",					// Webpack解析器 - 打包时检测代码规范时用
    "eslint-plugin-prettier": "^2.6.0",				// Eslint插件 - prettier风格的代码格式规范,配置eslint用
    "eslint-plugin-react": "^7.7.0",				// Eslint插件 - 让Eslint支持检测JSX(.eslintrc.json中有配置)
    "eslint-plugin-react-hooks": "^1.0.1",  			// Eslint插件 - 让Eslint支持检测Hooks语法
    "express": "^4.16.3",					// Node.js框架 - 用于server.js中提供开发环境的服务
    "favicons-webpack-plugin": "^0.0.9",			// 自动生成适配各终端得ico图标,pwa会用到部分
    "file-loader": "^1.1.11",					// Webpack解析器 - 解析各类文件时有用,图片音频等,处理它们的相对路径
    "happypack": "^5.0.0-beta.3",				// Webpack插件 - 多线程编译,速度更快,开发环境用
    "html-webpack-plugin": "^3.2.0",				// Webpack插件 - 最终打包时自动生成index.html,并配置其类容
    "less": "3.x",						// Less核心
    "less-loader": "^4.1.0",					// Webpack解析器 - 解析Less,主要是解析antd的样式文件
    "mini-css-extract-plugin": "^0.8.0", 			// Webpack插件 - 打包时单独提取所有CSS
    "mockjs": "^1.0.1-beta3",					// Mock 模拟生成随机数据用于开发测试
    "optimize-css-assets-webpack-plugin": "^5.0.3", 		// Webpack插件 - 打包时压缩提取出的CSS
    "postcss-loader": "^2.1.4",					// Webpack解析器 - 用于进一步解析CSS,比如自动添加-webkit-前缀等
    "prettier": "1.12.1",					// 代码自动格式化插工具
    "style-loader": "^0.20.3",					// Webpack解析器 - 用于提取重复的css代码加入到<style>标签里
    "sw-precache-webpack-plugin": "^0.11.5",			// Webpack插件 - 打包后生成用于pwa的server-worker文件
    "terser-webpack-plugin": "^1.2.2",  			// Webpack插件 - 这个插件修复了很多错误,覆盖webpack内置的uglifyJS
    "url-loader": "^1.0.1",					// Webpack解析器 - 用于处理一些小图片编译为base64,也处理它们的相对路径
    "webpack": "^4.6.0",					// Webpack 核心
    "webpack-cli": "^2.0.14",					// Webpack构建工具 - 4.0+版本webpack单独提取了这个npm包,打包时需要
    "webpack-dev-middleware": "^3.1.2",				// Webpack小型服务器(server.js中用这个来搭建开发环境所需的服务)
    "webpack-hot-middleware": "^2.22.0",			// Webpack热更新插件(server.js中用这个来启动代码热更新的功能)
    "webpackbar": "^3.2.0", // 控制台美化webpack进度条
    "xml-loader": "^1.2.1"					// Webpack解析器 - 解析xml文件
  },
  "browserslist": [ 	// 需要兼容的浏览器,postCSS等工具会自动读取这里等信息
    "iOS >= 8", 	// 兼容iOS8以上的版本
    "last 1 versions", 	// 兼容所有浏览器等最后一个版本
    "> 2%", 		// 兼容全球市场份额大于2%的浏览器
    "not dead" 		// 兼容官方还在继续支持更新的浏览器
    "not op_mini all" 	// 不考虑opera所有mini版本
  ]
}

.babelrc Babel 配置文件

{
  "presets": [				// babel初始化设置
    "@babel/preset-env",		// 让babel根据环境自动转换ES6+语法
    "@babel/preset-react"		// 让babel支持react语法
  ],
  "plugins": [						// 插件
    "@babel/plugin-transform-runtime",			// babel运行时垫片库
    "@babel/plugin-proposal-object-rest-spread",  	// 支持对象的扩展运算符
    "@babel/plugin-syntax-dynamic-import",  		// 支持异步import语法
    ["@babel/plugin-proposal-decorators", { "legacy": true }],	// 支持“修饰器”语法
    "@babel/plugin-proposal-class-properties",		// 支持编译class类中直接定义箭头函数语法
    "@babel/plugin-proposal-optional-chaining", // 支持“可选链”语法: a.b?.c, 相当于: a.b ? a.b.c : undefined
    "@babel/plugin-proposal-nullish-coalescing-operator", // 支持“双问号”语法:a ?? b, 相当于: a ? a : b;
    "react-loadable/babel",		// 代码分割插件raect-loadable配置,服务端渲染时有关,暂时没用
    [
      "import",				// babel-plugin-import按需加载插件
      {
	      "libraryName": "antd",	// 需要按需加载的包的名字
	      "style": true		// true - 加载antd的less样式文件, 'css' - 加载antd的css样式文件
      }
    ]
  ]
}

eslintrc.json Eslint 代码规范检查器配置文件

{
    "env": {			// 需要启用的全局变量(即哪些变量名被eslint默认存在而不用显式声明)
        "browser": true,	// 浏览器中的全局对象,主要是window
        "commonjs": true,	// commonjs规范中的全局对象
        "es6": true,		// ES6+中的全局对象
        "mocha": true,		// MoCha库的全局对象
    },
    "parser": "babel-eslint",				// 解析器(官方推荐),就用这个不然有些babel支持的新语法Eslint无法识别
    "parserOptions": {					// 其他初始化设置
        "ecmaVersion": 9,				// 识别到哪个ES版本的语法
        "ecmaFeatures": {				// 额外的语言特性
            "impliedStrict": true,			// 启用严格模式
            "jsx": true					// 启用对JSX的支持
        },
        "allowImportExportEverywhere": true, 		// 允许在任何地方使用import和export
        "sourceType": "module"				// 代码类型:项目中是用ES6模块import/export来构建的,所以这里设置module
    },
    "plugins": [	// 插件
        "react",	// eslint-plugin-react插件,支持react语法
        "react-hooks",  // 支持hooks语法
        "prettier"	// prettier语法规范
    ],
    "rules": {						// 自定义的检测规范配置
        "semi": "warn",					// 末尾必须加分号,否则警告
        "no-unused-vars": "off",  			// 不允许出现未使用过的变量,关闭
        "no-cond-assign": "error",			// 禁止条件表达式中出现赋值操作符,否则报错
        "no-debugger": "error",				// 禁用debugger语句,否则报错
        "no-dupe-args": "error",			// 禁止 function 定义中出现重名参数,否则报错
        "no-caller": "error",				// 禁用 arguments.caller 和 arguments.callee
        "no-unmodified-loop-condition": "error",	// 禁止死循环(循环条件不变)
        "no-with": "error",				// 禁用with语句
        "no-catch-shadow": "error",			// 禁止 catch 子句的参数与外层作用域中的变量同名
        "react/no-unescaped-entities": "off", 		// 禁止未知的属性出现在JSX的标签上,关闭
        "react-hooks/rules-of-hooks": "error", 		// hooks语法必须正确,否则报错
        "prettier/prettier": "warn"			// 一切与prettier规范不合的均警告
    }
}

public/manifest.json

{
  "short_name": "react-luo",				// 添加到桌面和启动页面时显示的APP名字
  "name": "react-luo",					// 桌面APP图标下面显示的名字
  "icons": [						// 所有可用的图标
    {
      "src": "./icons/favicon.ico",			// 图标路径
      "sizes": "64x64 32x32 24x24 16x16",		// 图标的尺寸
      "type": "image/x-icon"				// 图标的类型
    },
    {
      "src": "./icons/apple-touch-icon-114x114.png",
      "sizes": "114x114",
      "type": "image/png"
    },
    {
      "src": "./icons/apple-touch-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "start_url": ".",					// 主页路径,APP启动后默认跳转此页面
  "display": "standalone",				// 启动模式,standalone隐藏搜索栏
  "theme_color": "#222222",				// 手机顶部工具条颜色
  "background_color": "#222222"				// 启动页面背景色
}