【javascript】关于patch-package

背景

一个老的vue项目,预览pdf文件的时候,电子签章不显示

解决方案

由于是老项目,升级版本存在风险,然后又找到一些解决方案,都是修改源码,修改源码就引出了今天的主题 patch-package,我们需要修改node modules下面某个依赖包的源文件。【但是大部分最好不要这样改,直接升级包是最保险的,除非一些特殊的情况】

patch-package

官方文档:https://github.com/ds300/patch-package
作用: 这个包能让你修改并保存对npm 依赖包的修改。

上手

1, 第一步,安装patch-package这个包

npm install patch-package --save-dev

2, 在package.json的scripts里面添加一行执行脚本

"postinstall": "patch-package"

3, 修改node_modules目录下的源码,我们目前遇到的vue-pdf预览问题,是修改 node_modules\pdfjs-dist\es5\build\pdf.worker.js 这个文件下面的,_this3.setFlags(_util.AnnotationFlag.HIDDEN); 这一行代码

我们将这行代码注释在这里插入图片描述
运行代码,预览问题已经解决了

4,将此次更改持久化

npx path-package [YOUR-PACKAGENAME]

  npx patch-package pdfjs-dist

此时项目根目录会多出一个patches文件夹,里面会有一个文件
在这里插入图片描述
文件内容如下
在这里插入图片描述
5, commit 你的提交就OK了

这个包的原理是先记录你的改动,install之后,根据这个patches文件改动源信息,去执行脚本更新这个依赖包里面的内容。


后续踩坑记录本地打包正常,docker ci环境打包遇到了问题

问题1

cannot run in wd xxxxx@1.0.0 patch-package 

项目安装打包是在docker 容器里面执行,存在权限问题
在gitlabci文件执行 npm install 之前,执行命令 (npm set unsafe-perm true)

然鹅遇到问题2

/xxxxxx/node_modules/patch-package/node_modules/yaml/dist/compose/composer.js:33
                if (prelude[i + 1]?.[0] !== '#')
                                   ^

SyntaxError: Unexpected token .

执行postinstall失败了,可选链报错,但是我本地可以,经过排查,我本地node是14.17.0,容器环境10.14.0

降低patch-package版本 到v6.5.0然后就执行成功

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Electron-packager 是一个用于将 Electron 应用程序打包为可执行文件的工具。使用它可以将你的 Electron 项目构建为各个操作系统(如 Windows、Mac 和 Linux)的独立应用程序。 以下是使用 electron-packager 打包整理 Electron 应用程序的步骤: 1. 首先,确保你已经在项目中安装了 electron-packager。可以通过运行以下命令进行安装: ``` npm install electron-packager --save-dev ``` 2. 在项目的根目录下,创建一个打包脚本(例如 package.js),并将以下代码添加到文件中: ```javascript const packager = require('electron-packager'); const options = { // 你的应用程序的根目录 dir: '.', // 应用程序的平台(例如:darwin、win32、linux) platform: 'PLATFORM', // 应用程序的架构(例如:ia32、x64、armv7l) arch: 'ARCH', // 应用程序输出的目录 out: 'BUILD_FOLDER', // 应用程序的名称 name: 'APP_NAME', // 应用程序的可执行文件名 executableName: 'EXECUTABLE_NAME', // 其他选项... }; packager(options) .then(appPaths => { console.log('应用程序已成功打包到以下路径:', appPaths); }) .catch(err => { console.error('应用程序打包失败:', err); }); ``` 请根据你的项目需求修改上述代码中的选项。 3. 在终端或命令提示符中运行以下命令,以执行打包脚本: ``` node package.js ``` 这将使用 electron-packager 打包整理你的 Electron 应用程序。打包成功后,应用程序将被输出到指定的输出目录。 请注意,根据你的操作系统,需要设置正确的平台和架构参数。例如,对于 Windows 平台,platform 参数应设置为 'win32',arch 参数应设置为 'ia32' 或 'x64'。 希望这些步骤能够帮助你使用 electron-packager 打包整理你的 Electron 应用程序。如果有任何其他问题,请随时提问!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值