原创 前端自動化測試框架 Jest
目前業界裏比較主流的前端自動化框架有： Jasmine, Mocha, Jest. Jest 在性能、功能、易用性綜合來說是比較好的。 正在看的 vue-loader 源碼也使用 Jest 框架進行測試。就先來學習一下Jest 的使用吧！
2019-09-26 20:18:38
6
原创 Jest 簡單配置
與webpack 類似，當不做配置的時候，運行webpack 命令也可以進行打包，它會遵循webpack 默認的配置進行打包操作。 Jest 不做配置的時候，也是遵循它默認的配置進行打包。 那麼現在，我們自己來配置jest。 項目目錄下，
2019-09-26 20:18:37
原创 Jest 中的 snapshot 快照測試 基礎
項目中經常有一些配置文件。比如 export const generateConfig = () => { return { server: 'http://localhost', port:
2019-09-26 20:18:37
1
原创 前言
下面開始記錄前端測試框架。 此前先填填自己寫的原始單元測試腳本： 先編寫一個函數庫文件名爲 math.js function add (a, b) { return a + b } function minus (a, b)
2019-09-26 20:18:37
原创 Jest 中匹配器
有時我們希望Jest 在測試代碼發生變化的時候，能夠自動運行。 那麼我們在 jest 命令後面 加上參數 --watchAll 即可。 "scripts": { "test": "jest --watchAll",
2019-09-26 20:18:37
原创 Jest 中鉤子函數
首先，我們來寫一個類，並把它放入一個文件 counter.js 中，代碼如下。 class Counter { constructor () { this.number = 0 } addOne
2019-09-26 20:18:37
原创 Jest 異步代碼 測試要注意的點
Jest 異步代碼測試中，有一些點，我們記錄一下。 如果要測的是回調函數，那麼可以使用done 函數。 官網是如下解釋的： Instead of putting the test in a function with an empty a
2019-09-26 20:18:37
原创 編寫一個Loader
在前面webpack 的配置中，我們使用了許多loader， css-loader, style-loader, vue-loader, file-loader, ... 下面我們來自己寫一個Loader. 我們先創建一個文件夾，make
2019-09-15 20:44:40
原创 編寫一個Plugin
前面我們編寫了一個Loader ，這裏我們試下編寫一個簡單的plugin。 那麼Loader 與 Plugin，他們有什麼區別呢。 我們在源代碼中引入js 或其他格式文件時，我們可以通過Loader 去處理這些文件，也就是Loader 幫
2019-09-15 20:44:40
原创 Typescript 打包配置
如果項目中使用的是Typescript，那麼打包的時候，會和之前有些差異。 下面，我們來看看webpack 中如何配置，來支持Typescript 。 我們先使用命令 npm init 新建一個項目。 然後我們在項目跟目錄下新建文件web
2019-09-08 20:33:38
原创 webpack 打包 性能優化
當我們在打包一些大的項目的時候，會發現，打包的時間非常非常的長。 這時候除了等待，我們還可以思考如何提高webpack 打包效率。 比如下面幾個點： 1. 版本更新（技術迭代） 升級 webpack / node / npm
2019-09-08 20:33:38
原创 EsLint
eslint 是代碼規範的一種工具，下面我們來看看使用eslint 如何比較好地在webpack 中配置。 先，我們下載eslint 到項目。 npm install eslint --save-dev 然後，我們可以使用命令初始化es
2019-09-08 20:33:38
原创 環境變量
我們在寫webpack 的時候，之前它導出的是 一個對象。使用module.exports = {...} 形式。 現在我們把它改成導出一個函數，如下。 module.exports = (env) => { if (env &
2019-09-04 20:43:09
原创 Library 的打包基礎
當我們要打包一個Library 的時候，比如組件庫或者函數庫的時候，就不是像之前那樣的打包方式了。這裏我們就來試試Library 的打包。 這裏我們來做一個函數庫的打包。 先初始化一個項目（node 項目） 初始化：新建一個文件夾，然後進
2019-09-04 20:43:09
原创 webpack 與 瀏覽器緩存
我們先在項目中加入 jquery 與 lodash 庫。 然後在index.js 中引入並使用，如下。 import _ from 'lodash' import $ from 'jquery' const dom = $('<di
2019-09-04 20:43:09