Imgcook插件开发的调试技巧

imgcook自动生成的图片是放在阿里的CDN上,不能用于生产环境,所以官方开放了一种插件机制,可让开发者编写插件来将图片上传至自己的服务器。之前开发了一个7牛插件,但发现调试比较麻烦,于是总结了本文,记录imgcook插件开发调试的方法。

Test大法(官方)

不知道各位前端开发同学有没有写前端测试的习惯,imgcook自动生成的插件工程里已经带了测试脚本,如下图:

注意看那个test目录,不过截止本文发表的时候(2021-04-10),发现这个测试有个bug:

这里面的plugin不是我们自己插件的名字,这导致我开始直接npm run test的时候就过了,我还以为没问题。所以这里需要把这个plugin改成你自己开发的插件的名字。然后再运行:

npm run test

就可以看到过不过。

自己调用打Log

官方的Test方法有一个不好是不方便看日志输出,所以我找了一个野路子。先把你的index.js 复制一份,命名为debug.js

然后删除最底下的module.exports,把__test__.js中的mock部分复制过来,然后直接调用,代码如下:

onst mockData = require('./test/mockData');
const options = {
  data: mockData,
  filePath: './demo',
  config: {
    accessId: 'xx',
    dslId: 41,
    generator: ['@imgcook/generator-react'],
    plugin: ['@imgcook/plugin-image-qiniu'],
    uploadUrl: '',
    value: '17679'
  }
};

pluginHandler(options)

最后运行:node debug.js,就可以看log了。

后话

感谢imgcook小伙伴@笑翟的支持。