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解决问题。