[前端] 每日时报-2019.07.03

[wubaiqing]

[前端] 每日时报-2019.07.03

GitHub： https://github.com/wubaiqing/zaobao

[类库] 一个非常可爱的 React 卡通人脸库，很有意思：https://github.com/miukimiu/react-kawaii

[类库] immer 的 React Hooks 版：https://github.com/immerjs/use-immer

[工具] yarn-lock-cli 可以直接修改 yarn.lock 文件中的源地址：https://github.com/kokororin/yarn-lock-cli

[工具] mirror-config-china 是为中国内地的 Node.js 开发者准备的镜像配置，大大提高 Node 模块安装速度，不仅有淘宝，还有清华等镜像源地址：https://github.com/gucong3000/mirror-config-china

配图 -

示例 - mirror-config-china

npm i -g mirror-config-china --registry=https://registry.npm.taobao.org
# 查看 npm 配置
npm config list
# 查看环境变量
source ~/.bashrc && env

示例 - use-immer

import React from "react";
import { useImmerReducer } from "use-immer";

const initialState = { count: 0 };

function reducer(draft, action) {
  switch (action.type) {
    case "reset":
      return initialState;
    case "increment":
      return void draft.count++;
    case "decrement":
      return void draft.count--;
  }
}

function Counter() {
  const [state, dispatch] = useImmerReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </>
  );
}

示例 - yarn-lock-cli

In

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1

react@^15.6.1:
  version "15.6.2"
  resolved "http://registry.npm.taobao.org/react/download/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"

Out

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1

react@^15.6.1:
  version "15.6.2"
  resolved "https://registry.npmjs.org/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"

今日图 - 前端真是越来越简单了啊