uipx-webpack-plugin

UI图片对比插件，帮助开发者更方便地对比 UI 图与实现效果之间的差异

Example

live Demo

安装

npm

npm 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",
  ...
},