UI图片对比插件，帮助开发者更方便地对比 UI 图与实现效果之间的差异
live Demo
安装 npmnpm install uipx-webpack-plugin -D
外链
可以直接通过外链的方式使用：
<!-- 需要在 body 元素中或者后面加载 --> <script src="http://accforgit.github.io/lib/uipx/uipx.min.js"></script> <script> UIPX({ diffImg: 'http://example.com/example.png', opacityColorList: [ [255, 255, 255] ] }); </script> </html> Options
| key | Type | Description | Default |
|---|---|---|---|
| enable | boolean | 是否开启，建议在测试环境中开启(true)，开发环境中关闭(false) |
true |
| diffImg | string | 需要用于对比的 UI原图，可以是 http链接也可以是 base64，如果是 http链接，则因为 canvas 的安全性要求，图片链接必须与当前页面同域，可以在这里配置，也可以后续通过插件面板从本地选取 |
- |
| opacityColorList | number[][] | 需要将UI图中进行透明化的色值，例如 [[255, 255, 255]]，表示需要将 UI 图中 rgb值为 [255, 255, 255]的像素的透明度(opacity)置为 0，这是为了去除无关像素，减少视线干扰，可以在这里配置，也可以后续在插件面板中进行配置 |
- |
webpack.conf.js 文件配置里增加以下插件配置即可
// 引入插件 var UIPXPlugin = require('uipx-webpack-plugin'); module.exports = { ... plugins: [ new UIPXPlugin({ diffImg: 'http://example.com/example.png', opacityColorList: [ [255, 255, 255] ], enable: true }), ... ] ... }
uipx 作为一个调试模块，注定了需要在发布前把它去掉，为了避免人为操作失误而影响线上功能，这里建议配置如下：
package.json 文件配置：
scripts: { "dev": "webpack -w --debug", "prod": "webpack -p" }
webpack.conf.js 配置：
// 引入插件 var UIPXPlugin = require('uipx-webpack-plugin'); // 接收运行参数 const argv = require('yargs') .describe('debug', 'debug 环境') // use 'webpack --debug' .argv; module.exports = { ... plugins: [ new UIPXPlugin({enable: !!argv.debug}), ... ] ... }
这样，在开发的时候运行 npm run dev，发布的时候运行 npm run prod 即可。
webpack-dev-server 的配套用法：
用法其实跟上面一样，只是别忘记在启动脚本的时候增加 --debug 即可。如下：
// package.json "scripts": { ... "start:dev": "webpack-dev-server --debug", ... },
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
