今天我们要来说一说一个很常用的东西：一个图片组件，不用写一堆繁琐的 onError，不用把代码搞的到处都是，当图片加载失败时，会用默认图片代替原来的图。

实现原理

img 标签有一个 onerror 事件，当图片加载失败时就会执行这个事件，我们只要在这个事件中，替换图片的 src 属性，就可以在加载失败时用默认图替换原有的图片。

1
2

<!-- logo.png加载失败时，会显示logoError.png -->
<img src="logo.png" onerror="javascript:this.src='logoError.png';" />

简介

本篇文章主要介绍如何在react+ts项目中使用less，less-module是如何自动为样式生成对应的d.ts文件，以方便使用ts开发。

简介

已经研究了一年左右react，目前时机成熟，知识储备足够，我们决定正式在生产环境使用react+ts，期间遇到了一些只在生产环境需要考虑的问题，也踩了许多坑，这个系列会持续更新，记录react在针对生产环境开发和部署时遇到的实际问题、分析过程和解决方案。

本系列文章适合有webpack基础、对前端架构设计有一定了解、写过react+ts代码的前端工程师阅读，不适合萌新和不熟悉ts的同学。

写这个系列的主要目的是分享解决问题的思路和方案，而不是教程，要读懂这些文章，你必须：

• 了解webpack配置和前端工程化
• 理解为什么要使用文中所提到的技术和工具
• 写过生产环境中的代码
• 理解typescript

简介

vue-cli是一个非常好用的vue项目脚手架生成工具，当一个项目从开发环境上线到生产环境时，往往会遇到一些问题：为什么打包出来的文件有2Mb大？为什么页面上的资源加载非常缓慢？为什么有毫不相关的代码被打包到了同一个文件？本文主要针对vue-cli生成的项目，在打包过程中做一些优化。

嗨~我的老伙计们！

让我们来瞧瞧现在能用哪些数组方法了！还有什么能比知道这些用法更令人兴奋的呢？

这篇文章不是对Array全部用法的总结，只是给大伙瞧瞧比较好用的功能。

简介

发布一个新版本页面后，如果未加干预，用户往往还会看到更新前的样式，这就是浏览器端的缓存在“捣乱”了，本文写于2020年3月，介绍浏览器的缓存机制，还会告诉你如何在需要的时候使用或丢弃缓存。

算法原理

费雪耶茨算法（Fisher-Yates shuffle），用来将一个集合随机排列，常用在扑克洗牌，打乱抽奖奖池等场景中。

使用 Fisher-Yates 算法打乱顺序，得到的每种排列都是等概率的。Fisher-Yates 算法运行时不占用额外的存储空间，消耗的时间正比于需要打乱的数的数量，改良后的算法时间复杂度仅有O(n)。

本篇是前文的扩展延伸。

美化webpack输出信息

webpack在开发时的输出信息有一大堆，可能会干扰我们查看信息，以下提供一个美化、精简输出信息的建议。

精简以下开发服务器输出信息，修改webpack.dev.js：

1
2
3
4
5
6
7
8
9
10
11
12

// ...webpack configs
stats: {
  colors: true,
  children: false,
  chunks: false,
  chunkModules: false,
  modules: false,
  builtAt: false,
  entrypoints: false,
  assets: false,
  version: false
}

这一篇主要介绍代码规范相关的内容。

eslint

我们通常使用lint工具来检查代码不规范的地方，以下是将 eslint、typescript 和 webpack 结合使用的例子。

首先安装依赖：

1
2

$ npm i -D eslint babel-eslint eslint-loader eslint-plugin-jsx-control-statements
$ npm i -D eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin

配置webpack开发服务器

打包用的配置基本完成了，现在我们来配置一下开发环境。

首先处理通用配置config.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

module.exports = {
  // ...configs
  devServer: {
    port: 8080,
    host: 'localhost',
    contentBase: path.join(__dirname, '../public'),
    watchContentBase: true,
    publicPath: '/',
    compress: true,
    historyApiFallback: true,
    hot: true,
    clientLogLevel: 'error',
    open: true,
    overlay: false,
    quiet: false,
    noInfo: false,
    watchOptions: {
      ignored: /node_modules/
    },
    proxy: {}
  }
};