// 官方源
npm config set registry https://registry.npmjs.org/
// 淘宝源
npm config set registry https://registry.npm.taobao.org/

yarn upgrade-interactive --latest
or
npm install -g npm-check-updates
ncu // 检测包是否可以更新
ncu -u // 更新 package.json 版本包
yarn

// https://gitmoji.carloscuesta.me/
npm i -g gitmoji-cli

1. antd React Ui 组件库 蚂蚁金服 出品 github 地址: https://github.com/ant-design/ant-design, npm 地址 https://www.npmjs.com/package/antd, 官网https://ant.design/docs/react/introduce

2. axios promise对象 HTTP 请求库 promise是 es6的知识点。如果浏览器不支持 promise 可以添加 es6-promise 包兼容。 js 原生请求有两个 XMLHttpRequest(XHR) 和 fetch

3. classnames 动态控制 HTML元素中的 class 属性值 github 地址: https://github.com/JedWatson/classnames, npm 地址: https://www.npmjs.com/package/classnames

4. moment 时间处理库 github 地址: https://github.com/moment/moment, npm 地址 https://www.npmjs.com/package/moment

5. react-router-dom 路由切换 github 地址: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom, npm 地址 https://www.npmjs.com/package/react-router-dom 官网[https://reactrouter.com/web/guides/quick-start]

6. crypto-js 加解密

1. ts-migrate: 一键 js 转 ts 代码
2. eslint: js 代码规范 https://eslint.org/docs/rules/
3. stylelint: CSS 代码规范 https://stylelint.io/user-guide/rules/
4. prettier: 代码格式化 https://prettier.io/docs/en/index.html
5. pre-commit: 只有通过代码规范检查才可以 git 提交到远程仓库
6. cross-env: 设置开发环境变量
7. nodemon: 检测文件变化
8. npm-watch: 监控文件变化重新启动 craco-less 是 @craco/craco 包开发的插件，主要是为了 css 的 less 预处理器。更多是为了修改 antd 包的主题 github 地址: https://github.com/FormAPI/craco-less, npm 地址 https://www.npmjs.com/package/craco-less @craco/craco 用来修改 create-react-app 脚手架 webpack 的配置 github 地址: https://github.com/sharegate/craco, npm 地址: https://www.npmjs.com/package/@craco/craco
9. webpack-bundle-analyzer 打包之后的依赖关系图 compression-webpack-plugin 减少打包文件过大导致下载很慢 需要 nginx 的 gzip 模块配置 uglifyjs-webpack-plugin

查看是否开启了 gzip 只需看 请求头 的 content-encoding的值是不是 gzip

// 动态压缩
<https://nginx.org/en/docs/http/ngx_http_gzip_module.html>
http {
  gzip on;
  gzip_min_length  1k;
  gzip_buffers     4 32k;
  gzip_http_version 1.1;
  gzip_comp_level 2;
  gzip_types       text/plain application/x-javascript text/css application/xml;
  gzip_vary on;
  gzip_disable "MSIE [1-6].";
}
// 静态压缩
<https://nginx.org/en/docs/http/ngx_http_gzip_static_module.html#gzip_static>
http {
  gzip_static  on;
}

// https 可通过 letsencrypt.org获取

listen 443 ssl;
ssl_certificate cert/domain name.pem;   #将domain name.pem替换成您证书的文件名。
ssl_certificate_key cert/domain name.key;   #将domain name.key替换成您证书的密钥文件名。
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;  #使用此加密套件。
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;   #使用该协议进行配置。
ssl_prefer_server_ciphers on;

location / {
  try_files $uri $uri/ /index.html;
}

在 package.json 中 添加 "proxy": "www.domain.com" 在 nginx 设置

location /api {
  proxy_pass www.domain.com;
  proxy_set_header   X-Forwarded-Proto $scheme;
  proxy_set_header   X-Real-IP         $remote_addr;
}

在 src 目录下建 setupProxy.js 文件

// https://github.com/chimurai/http-proxy-middleware#example
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://www.domain.com',
      changeOrigin: true,
    })
  );
};