purple_lumpy的博客

Jest 中的 snapshot 快照测试基础

purple_lumpy — Sat, 21 Sep 2019 17:27:42 +0800

项目中经常有一些配置文件。比如 export const generateConfig = () => { return { server: 'http://localhost', port: '8080' } } 那测试它的测试用例可以这样写 import { generateConfig } from './snapshot....

Jest 中钩子函数

purple_lumpy — Sat, 21 Sep 2019 12:52:38 +0800

首先，我们来写一个类，并把它放入一个文件 counter.js 中，代码如下。 class Counter { constructor () { this.number = 0 } addOne () { this.number += 1 } minusOne () { this.number -= 1 ...

Jest 异步代码测试要注意的点

purple_lumpy — Sat, 21 Sep 2019 11:52:07 +0800

Jest 异步代码测试中，有一些点，我们记录一下。如果要测的是回调函数，那么可以使用done 函数。官网是如下解释的： Instead of putting the test in a function with an empty argument, use a single argument calleddone. Jest will wait until thedonecall...

Jest 中匹配器

purple_lumpy — Thu, 19 Sep 2019 20:41:13 +0800

有时我们希望Jest 在测试代码发生变化的时候，能够自动运行。那么我们在 jest 命令后面加上参数 --watchAll 即可。 "scripts": { "test": "jest --watchAll", "coverage": "jest --coverage" }, 下面，我们在math.test.js 中增加一个测试用例 test('测试匹配器'...

Jest 简单配置

purple_lumpy — Thu, 19 Sep 2019 20:40:54 +0800

与webpack 类似，当不做配置的时候，运行webpack 命令也可以进行打包，它会遵循webpack 默认的配置进行打包操作。 Jest 不做配置的时候，也是遵循它默认的配置进行打包。那么现在，我们自己来配置jest。项目目录下，使用命令 npx jest --init 意思是调用本项目下node_modules 下的jest 然后它会询问我们几个问题，根据需要选择就好 ...

前端自动化测试框架 Jest

purple_lumpy — Thu, 19 Sep 2019 15:19:00 +0800

目前业界里比较主流的前端自动化框架有： Jasmine, Mocha, Jest. Jest 在性能、功能、易用性综合来说是比较好的。正在看的 vue-loader 源码也使用 Jest 框架进行测试。就先来学习一下Jest 的使用吧！使用Jest ，我们先来创建一个项目。（新建一个目录，进入并使用 npm init -y 初始化项目）先来安装Jest 到项目 (使用版本24.8....

前言

purple_lumpy — Thu, 19 Sep 2019 14:05:42 +0800

下面开始记录前端测试框架。此前先填填自己写的原始单元测试脚本：先编写一个函数库文件名为math.js function add (a, b) { return a + b } function minus (a, b) { return a-b } function multi (a, b) { return a * b } function devis...

编写一个Plugin

purple_lumpy — Sun, 15 Sep 2019 11:36:58 +0800

前面我们编写了一个Loader ，这里我们试下编写一个简单的plugin。那么Loader 与 Plugin，他们有什么区别呢。我们在源代码中引入js 或其他格式文件时，我们可以通过Loader 去处理这些文件，也就是Loader 帮助我们处理模块。而Plugin 是在我们打包的时候，在某些特定时刻上插件会被调用。比如说，当打包结束希望自动生成html 文件，这时可以使用htmlWebpa...

编写一个Loader

purple_lumpy — Sun, 15 Sep 2019 09:17:34 +0800

在前面webpack 的配置中，我们使用了许多loader， css-loader, style-loader, vue-loader, file-loader, ... 下面我们来自己写一个Loader. 我们先创建一个文件夹，make-loader ，接着使用 npm init -y 命令对这个文件夹进行node 项目初始化。然后我们再在项目中安装webpack 和 webpack-c...

webpack 打包性能优化

purple_lumpy — Sun, 08 Sep 2019 18:18:26 +0800

当我们在打包一些大的项目的时候，会发现，打包的时间非常非常的长。这时候除了等待，我们还可以思考如何提高webpack 打包效率。比如下面几个点： 1. 版本更新（技术迭代）升级 webpack / node / npm / yarn 版本 2. 尽可能少的模块上应用 Loader 如下，我们通过设施exclude，使node_modules 中的代码，不用load...

EsLint

purple_lumpy — Sun, 08 Sep 2019 16:16:04 +0800

eslint 是代码规范的一种工具，下面我们来看看使用eslint 如何比较好地在webpack 中配置。先，我们下载eslint 到项目。 npm install eslint --save-dev 然后，我们可以使用命令初始化eslint 的配置文件（/.eslintrc.js） npx eslint --init 按照它给我们的问题选择好选项后，就会在项目根目录下生成esli...

Typescript 打包配置

purple_lumpy — Sat, 07 Sep 2019 21:35:01 +0800

如果项目中使用的是Typescript，那么打包的时候，会和之前有些差异。下面，我们来看看webpack 中如何配置，来支持Typescript 。我们先使用命令 npm init 新建一个项目。然后我们在项目跟目录下新建文件webpack.config.js 与文件夹 src 。然后，我们在项目中把webpack 先下载进来： npm install webpack web...

Library 的打包基础

purple_lumpy — Mon, 02 Sep 2019 22:25:23 +0800

当我们要打包一个Library 的时候，比如组件库或者函数库的时候，就不是像之前那样的打包方式了。这里我们就来试试Library 的打包。这里我们来做一个函数库的打包。先初始化一个项目（node 项目）初始化：新建一个文件夹，然后进入这个文件夹运行命令 npm init -y 然后就可以初始化一个node 项目啦！初始化后，会在项目跟目录下，新建一个package.json 文件...

环境变量

purple_lumpy — Thu, 29 Aug 2019 07:46:32 +0800

我们在写webpack 的时候，之前它导出的是一个对象。使用module.exports = {...} 形式。现在我们把它改成导出一个函数，如下。 module.exports = (env) => { if (env && env.production) { return // some config production class ...

shimming

purple_lumpy — Thu, 29 Aug 2019 07:42:36 +0800

在webpack 打包过程中，我们往往要做代码兼容或者打包过程的兼容。比如我们之前使用的babel-polyfill 。我们来讲一个例子，有一个第三方代码，如下。 export function ui () { $('body').css('background', 'green') } 如果在index.js 中直接引入，是使用不了的。运行时，会报错。如下index.js...

webpack 与浏览器缓存

purple_lumpy — Thu, 29 Aug 2019 07:42:11 +0800

我们先在项目中加入 jquery 与 lodash 库。然后在index.js 中引入并使用，如下。 import _ from 'lodash' import $ from 'jquery' const dom = $('

') dom.html(_.join(['hello', 'world'], ' ')) $('body').append(dom) 然后...

css 文件的代码分割

purple_lumpy — Tue, 27 Aug 2019 20:36:22 +0800

之前写的都是js 代码分割，下面来看看css 代码分割。先看看webpack.config.js 如下 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin...

打包分析，Preloading，Prefetching

purple_lumpy — Mon, 26 Aug 2019 21:46:06 +0800

打包分析，是指当我们使用webpack 对项目进行打包之后，可以使用打包分析工具，来对我们打包生成的文件进行分析，来看看打包是否合理。 webpack 官方提供了它的一个分析工具的github 仓库：https://github.com/webpack/analyse 下面我们就来使用一下这个分析工具，来分析一下我们打包生成的代码文件。我们要对我们打包的代码进行分析，首先要生成一个打包过程...

Lazy Loading 懒加载与Chunk

purple_lumpy — Mon, 26 Aug 2019 10:41:21 +0800

我们接着上文例子继续写，因为lazy loading , chunk 是之前就有遇到的。我们删除上文中src/test.js 文件。我们放开index.js 中引入并使用lodash 的注释代码，如下 // sync import _ from 'lodash' var element = document.createElement('div'); element.innerHTM...

SplitChunksPlugin 配置参数 2

purple_lumpy — Sun, 25 Aug 2019 22:31:14 +0800

我们继续上篇，探索一下splitChunks 的配置。我们在项目的 src 下新建一个文件 test.js 导出一个很少的内容，如下。 export default { name: 'Me a Test' } 然后我们将入口index.js 文件改为这样： import test from './test' console.log(test.name) 运行打包命令，由于...