Pag动画：umi+libpag+copy-webpack-plugin实现及问题解决

标签：node plugin modules js webpack libpag workspace jenkins

1、package.json添加如下，安装依赖：

"libpag": "^4.2.84",
"copy-webpack-plugin": "9.1.0",  为什么是写死的旧版本，后面解释

2、使用的方法，这里只是一个小示例，具体如何使用看个人（这里主要是想记录过程中出现的问题及解决方式）：

  const init = async () => {       const PagInfo = await LibpagUtils.init() as any; // LibpagUtils为封装好的方法       playPag(PagInfo)   }

const playPag = (PagInfo: any) => {
        const { url, repeatCount } = props || {}
        const { PAGFile, PAGView } = PagInfo
        fetch(url).then((response) => {
            (window as any).globalThis = window;
            return response.arrayBuffer()
        }).then(async (buffer) => {
            const pagFile = await PAGFile.load(buffer);
            const pagView = await PAGView.init(pagFile, canvasRef.current);
            // 判定监听事件
            pagViewAddListener(pagView);
            setPagView(pagView);
            // 0 表示无限次
            pagView.setRepeatCount(repeatCount || 0);
            await pagView.play();
        });
    }

3、copy-webpack-plugin的使用，我这里是umi项目，在config/config.ts目录中添加如下：

const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');  // 这个插件没有的话先安装

chainWebpack: (memo: WebpackChain) => {
    ...... // 其他的插件使用
    memo.plugin('CopyPlugin').use(
      new CopyPlugin({
        patterns: [{ from: path.resolve(__dirname, '../node_modules/libpag/lib/libpag.wasm'), to: '../dist' }], // dist为打包后的静态文件路径
      })
    )
  }

4、到这里都是很顺利的，本地调试播放也很顺利，但当在jenkins部署到测试时出现如下错误：

HookWebpackError: Invalid host defined options
    at makeWebpackError (/data/jenkins/workspace/。。。(隐私处理)/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:108568:9)
    at /data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:93433:12
    at eval (eval at create (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:50186:10), <anonymous>:99:1)
    at /data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:91405:26
    at /data/jenkins/workspace/。。。/node_modules/copy-webpack-plugin/dist/index.js:710:13
-- inner error --
TypeError: Invalid host defined options
    at /data/jenkins/workspace/。。。/node_modules/copy-webpack-plugin/dist/index.js:706:13
    at fn (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:91404:9)
    at _next0 (eval at create (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:50186:10), <anonymous>:96:1)
    at eval (eval at create (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:50186:10), <anonymous>:113:1)
    at Hook.eval [as callAsync] (eval at create (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:50186:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:49988:14)
    at /data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:91410:46
    at /data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/copy-webpack-plugin/cjs.js:1:279358
caused by plugins in Compilation.hooks.processAssets
TypeError: Invalid host defined options
    at /data/jenkins/workspace/。。。/node_modules/copy-webpack-plugin/dist/index.js:706:13
    at fn (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:91404:9)
    at _next0 (eval at create (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:50186:10), <anonymous>:96:1)
    at eval (eval at create (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:50186:10), <anonymous>:113:1)
    at Hook.eval [as callAsync] (eval at create (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:50186:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:49988:14)
    at /data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:91410:46
    at /data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/copy-webpack-plugin/cjs.js:1:279358
build failed
Error: build failed
    at /data/jenkins/workspace/。。。/node_modules/@umijs/bundler-webpack/lib/index.js:172:29
    at /data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:114591:14
    at /data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:114422:12
    at /data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:38249:7
    at done (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:38284:11)
    at /data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:38237:7
    at /data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:114419:8
    at arrayEach (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:37824:9)
    at Object.each (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:38265:9)
    at nodeDone (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:114413:21)
    at finalCallback (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:95870:32)
    at onCompiled (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:95879:20)
    at /data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:96554:25
    at finalCallback (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:93172:11)
    at /data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:93432:18
    at eval (eval at create (/data/jenkins/workspace/。。。/node_modules/@umijs/deps/compiled/webpack/5/bundle5.js:50186:10), <anonymous>:99:1)

5、尝试了很多方式，都没找到出现问题的原因，最后找到了解决的方式，将copy-webpack-plugin从版本12多降到9.1.0解决问题。

 

标签：node,plugin,modules,js,webpack,libpag,workspace,jenkins
From： https://www.cnblogs.com/atao24/p/18325387