本文不会放api的用法，建议先看看是怎么用的

项目架构

采用monorepo的形式，项目目录下有多个子项目，下面放了资料链接和几处用法，其他本文不多赘述。

现代前端工程为什么越来越离不开 Monorepo?
为什么使用pnpm可以光速建立好用的monorepo（比yarn/lerna效率高）
pnpm workspace文档

在看为什么vue文档能做到新内容可用更新（利用service worker）的时候，顺便看到了update-notifier（提示版本更新的库，实现方式：定时检查npm上的版本和本地package.json的版本对比，有差异就提示用户更新），看update-notifier源码的时候发现有很多lazyImport，觉得挺新奇，于是有了这篇文章

思想

为了提高应用的启动时间，在没有用到仓库的额外功能时不加载模块，所以将模块加载延迟到使用之前

crossvent：封装跨平台事件绑定的库

跨平台的触摸事件

利用crossvent封装绑定跨平台拖拽事件的方法touchy，以便支持移动端和pc端

根据环境获取的触摸事件名，用懒加载的方式替换掉touchy函数，之后绑定事件不需要再判断

工具类

bind

1
2
3
4
5
6
7
8
9

function bind(fn, thisArg) {
  return function wrap() {
    var args = new Array(arguments.length);
    for (var i = 0; i < args.length; i++) {
      args[i] = arguments[i];
    }
    return fn.apply(thisArg, args);
  };
};

快速初始化

用npm

1

npm init egg --type=simple

Redux 官方文档对 Redux 的定义是：一个可预测的 JavaScript 应用状态管理容器

安装

1

npm install --save redux

函数式组件只能使用props，Hook能够在函数式组件的情况下使用state、生命周期以及其他的React特性

为什么需要引入React Hook，可以查看官方文档：https://zh-hans.reactjs.org/docs/hooks-intro.html#motivation

• react-router：路由核心库，包含诸多和路由功能相关的核心代码
• react-router-dom：利用路由核心库，结合实际的页面，实现跟页面路由密切相关的功能

安装

1
2
3

# react-router-dom依赖react-router
# 安装的时候会把react-router一起安装了
npm install react-router-dom -S

1. 设计思想

1. React 设计思想
2. React的设计哲学 - 简单之美
3. 颠覆式前端UI开发框架:React

引入

如果用最初始的setTimeout递归实现定时器，一秒执行一次回调，则代码如下