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" // 启动页面背景色
}