J'Blog

package.json 项目配置以及依赖包的使用记录

package.json 项目配置以及依赖包的使用记录

本文档针对react进行开发使用，创建react项目使用create-react-app初始化项目，参考自domesy

创建项目配置文件

插件

react-app-rewired customize-cra

执行命令

npm install react-app-rewired customize-cra --save

官方介绍customize-cra扩展了create-react-app的功能，customize-cra依赖于react-app-rewired，所以需要安装两个包。

配置：

在 package.json 中的 script 下的 react-scripts 替换为 react-app-rewired 即可

{
 ...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  ...
}

然后在更目录下创建 config-overrides.js 文件，以后所有的配置就在此文件中

配置装饰器

装饰器只能用于class组件

插件 @babel/plugin-proposal-decorators

执行命令 npm install @babel/plugin-proposal-decorators -S

配置

const { override, addDecoratorsLegacy } = require('customize-cra');

module.exports = override(
 	...,
  addDecoratorsLegacy(),
 	...
);

MUI组件

插件 @material-ui/core

执行命令 npm install @material-ui/core -S

Testing library

Testing libraryshi React官方推荐的单元测试库，提供了一系列拟人化的API来帮助我们测试UI组件。具体使用参考官方文档

插件 @testing-library/jest-dom @testing-library/react @testing-library/user-event

如果使用的是create-react-app新建的应用，项目中应该默认会安装以上三个插件，如果不是的话，需要手动安装,官方推荐Jest+testing library

执行命令 npm install @testing-library/react @testing-library/user-event @testing-library/jest-dom -S

@types

当我们用 npm 等包管理工具安装第三方包的时候，有些包并不是 TypeScript 编写的，自然也不会导出 TypeScript 声明文件。这种情况下，如果我们在 TypeScript 项目中引入了这种包，则会编译报错(没有设置 allowJS)。比如，当我们通过npm install jquery --save 安装 jquery 包并引用的时候，typeScript 会报错：TypeScript 没有找到 jquery 这个包的定义，你可以通过npm install @types/jquery安装相关声明，或者自己定义一份.d.ts 文件，并将 jquery 声明为 module。

@types/axios

用于浏览器和node.js的基于Promise的HTTP客户端

1. 从浏览器制作XMLHttpRequests

2. 让HTTP从node.js的请求

3. 支持Promise API

4. 拦截请求和响应

5. 转换请求和响应数据

6. 取消请求

7. 自动转换为JSON数据

8. 客户端支持防止XSRF

@types/jest

一般我们写完代码会通过console.log的方式去测试，上线的时候再删掉，使用Jest测试，可以避免这样的问题出现。Jest 是当下最主流的前端测试框架；对于初学者，Jest 配置入门并不算友好，尤其是选择了 Typescript 做开发语言，教程很烦琐。选择ts-jest 的预处理库 ，配置非常简单，一共就三步。

执行命令npm install -D jest typescript ts-jest @types/jest

生成配置npm ts-jest config:init

运行npm jest

这里推荐一款 vscode 插件——Jest Runner。可以对单个case进行debug，在每个test case上会有run|debug的按钮，可以给代码打断点进行debug也可以直接run这个case。

@types/mockjs

一般开发前后端都是并行开发的，等待接口的同时数据需要前端自己mock， 具体使用参考文档mockjs

执行命令 npm install @types/mockjs -S

@types/qrcode.react

react使用qrcode.react生成二维码

执行命令 npm install @types/qrcode.react -S

@types/qs

是用来处理url中参数的一个js库

1. qs.parse 方法可以把一段格式化的字符串转换为对象格式a=1&b=2 => {a: 1, b: 2}

2. qs.stringify 则和 qs.parse相反，是把一个参数对象格式化为一个字符串。{a: 1, b: 2} => a=1&b=2

3. 可以对格式化后的参数进行排序：qs.stringify(params, (a,b) => a.localeCompare(b))

@types/react-dom

我们在使用react开发网页时，会下载两个包，一个是react，一个是react-dom，其中react包是react的核心代码，react-dom则是React剥离出的涉及DOM操作的部分。

react的核心思想是虚拟DOM，react包含了生成虚拟DOM的函数react.createElement，及Component类。当我们自己封装组件时，就需要继承Component类，才能使用生命周期函数等。而react-dom包的核心功能就是把这些虚拟DOM渲染到文档中变成实际DOM。

react-dom主要包含三个API：findDOMNode、unmountComponentAtNode 和 render。

重点讲解render用于将React渲染的虚拟DOM渲染到浏览器DOM，一般在顶层组件使用。该方法把元素挂载到 container 中，并且返回 element 的实例（即 refs 引用），如果是无状态组件，render 会返回 null。当组件装载完毕时，callback 就会被调用。

render(ReactElement element,DOMElement container,[function callback])

ahooks

阿里的一套hook方案， 详情参考官方文档ahooks

执行命令 npm install ahooks -S

antd-mobile

antd移动端UI组件

执行命令 npm install antd-mobile -S

chalk & clear & figlet

clear: 清屏

chalk: 装饰作用，使之终端上的输出加上颜色

figlet: 作用是将字母转化为图片，使之更加醒目

执行命令 npm install figlet clear chalk@^4.1.0 -S

compression-webpack-plugin

压缩js、css

cross-env

在内置中分为开发环境和生成环境，对应的分别为 production 和 development 模式，使用cross-env就可以进行分模块打包了

执行命令npm install cross-env -S

配置：在 package.json

{
	...,
  "scripts": {
    "start": "react-app-rewired start ",
    "start:pre": "cross-env REACT_APP_ENV=pre react-app-rewired start",
    "build": "react-app-rewired build",
    "starbuildt:pre": "cross-env REACT_APP_ENV=pre react-app-rewired start ",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  ...
}

dva-core & dva-loading & dva-dva-model-persist & dva-type

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。当然我们在配置项目的时候没必要要完整的dva，只需要 以下两个插件 在配合 react-redux 配合就可以了dva-core dva-loading

执行命令 npm install react-redux -S & npm install dva-core dva-loading -S

数据持久化 dva-model-persisit

执行命令 npm install dva-model-persisit -S

html2canvas

将html转化为base64图片

执行命令 npm install html2canvas -S

less & less-loader

less预处理器，可以识别less文件内容

执行命令npm install less less-loader -D

lib-flexible & postcss-px2rem-exclude

页面自适应，px转rem

执行命令 npm install postcss-px2rem-exclude lib-flexible -S

react-keeper

路由为什么选择 react-keeper，主要的原因是，在H5，他有一个非常常见的功能，那就是缓存页面，在Vue中这个功能非常好实现 通过 keeper-alive 就可以实现

但在 react 中就比较难以实现了，而 react-keeper 这个库，可以说是很好的解决了这个问题，甚至比 Vue的keeper-alive更加简便，更好配置

以移动端的配置而言，个人觉得 react-keeper 比 React-Router 更加适合~

执行命令 npm install react-keeper -S

可以查看这篇文章

webpack-bundle-analyzer

分析包大小插件

执行命令 npm install webpack-bundle-analyzer -S