Nebulous Pumpkin Moons

    uipx-webpack-plugin

    1.0.6 • Public • Published

    uipx-webpack-plugin

    NPM

    img img img

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

    img

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

    Install

    npm i uipx-webpack-plugin

    DownloadsWeekly Downloads

    2

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    87.1 kB

    Total Files

    15

    Last publish

    Collaborators

    • kother1