React16 Jest单元测试 之 Testing Asynchronous Code(Async/Await)

React16 Jest单元测试 之 Testing Asynchronous Code(Async/Await)

通常Javascript代码很多情况下是异步运行的,当代码异步运行的时候,Jest需要知道什么运行结束,然后进行下一个单元测试,Jest自身就有需要方法来处理这个。下面记录如下

项目初始化【这里还是之前的项目,省的在配置麻烦】

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag:v_1.0.1
...

React16 Jest单元测试 之 Testing Asynchronous Code

React16 Jest单元测试 之 Testing Asynchronous Code

通常Javascript代码很多情况下是异步运行的,当代码异步运行的时候,Jest需要知道什么运行结束,然后进行下一个单元测试,Jest自身就有需要方法来处理这个。下面记录如下

 

项目初始化【这里还是之前的项目,省的在配置麻烦】

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag:v_1.
...

Webpack4渐进式网络应用程序

Webpack4渐进式网络应用程序

什么是渐进式网络应用程序

渐进式网络应用程序(Progressive Web Application - PWA),是一种可以提供类似于原生应用程序(native app)体验的网络应用程序(web app)。PWA 可以用来做很多事。其中最重要的是,在离线(offline)时应用程序能够继续运行功能。这是通过使用名为 Service Workers[https://developers.go

...

Webpack4缓存相关配置 - Manifest

Manifest干嘛用,我摘抄了下官网的一些内容如下,先来了解下

一旦你的应用程序中,如 index.html 文件、一些 bundle 和各种资源加载到浏览器中,会发生什么?你精心安排的 /src 目录的文件结构现在已经不存在,所以 webpack 如何管理所有模块之间的交互呢?这就是 manifest 数据用途的由来……

 

当编译器(compiler)开始执行、解析和映射应用

...

Webpack4生产环境构建相关配置 - 基础配置

这里为什么要实践下这个,引用下官方的原文

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中,我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中,我们的目标则转向于关注更小的 bun

...

Webpack4代码分割实现按需加载/懒加载

为什么要实现按需加载或懒加载,引用下官网的话

懒加载或者按需加载,是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开,然后在一些代码块中完成某些操作后,立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载。

1、现在clone原始项目如下

git clone https://git
...

Webpack4+React16+ReactRouter4 - historyApiFallback 多级路由

之前的几篇文章写的很多,里面在开发环境下都用到了
 

historyApiFallback: {
  rewrites: [{
    from: /^\/$/,
    to: './index.html',
  },
  ],
},

但是在我们开发也许会遇到一个很奇怪的问题就是,当我们访问到二级以上的路由的情况下,在刷新页面会发现页面加载不出需要的js,此时会显示一个404,说文件不

...

Webpack4+React16+ReactRouter4+Redux整合开发 - Redux Logger日志相关配置

之前的几篇文章继承了redux,这里不得不说下与redux开发相关的一些配置redux-logger,其实有很多,也有另外一种方式,这里我觉得这个是比较好的,这里做下记录,跟大家分享下。

首先clone代码

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git redux-devtools

...

Webpack4+React16+ReactRouter4+Redux整合开发 - react-hot-loader

继续上篇文章【Webpack4+React16+ReactRouter4+Redux整合开发】继续分享,这里我们针对细节的部分做下优化,主要是能更加高效的提升我们的开发效率

1、clone 实例代码并将代码运行起来

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git react-hot-l
...