uni-app命令行构建Module parse failed:Unexpected token错误处理

简介: 分享一次打包环境升级导致的jenkins部署流程失败问题的解决过程。

背景

最近在使用公司内jenkins部署uni-app项目时又遇到了如下的错误:

Error: Error: Missing binding /data/apps/nginx/web/jnpf-app/node_modules/node-sass/vendor/linux-x64-83/binding.node\nNode Sass could not find a binding for your current environment: Linux 64-bit with Node.js 14.x\n\nFound bindings for the following environments:\n  - Linux 64-bit with Node.js 8.x\n\nThis usually happens because your environment has changed since running `npm install`.\nRun `npm rebuild node-sass` to download the binding for your current environment.

单纯从错误信息看也知道是环境发生了变化导致的,后又找了运维确认得知打包的环境统一改为使用node14版本的docker镜像进行了,所以导致bind.node文件与实际使用环境不匹配了,这个问题之前已经总结了解决方案👉🏻binding.node问题(http://xuedingmiao.com/blog/win_missing_binding_node.html)

所以这里按部就班就可以了,但是接下来却又报出了如文章标题所示的错误:
1628239185057012060.png

经过一番调查之后,发现是项目内含有可选链操作符这种新特性,但是缺少库来进行转译操作导致js编译失败,jenkins部署流程没有成功。

解决办法

这时候因为前提是我们已经对uni-app项目进行了命令行化的改造,所以项目实际使用vue-cli进行构建的,我们只需要按照vue项目的一般处理办法来做就可以了。

  1. 安装如下两个依赖:
  • @babel/preset-env
  • babel-polyfill
  • @babel/plugin-transform-runtime
npm install @babel/preset-env babel-polyfill @babel/plugin-transform-runtime -D 
  1. 修改babel.config.js配置文件,在presets中增加插件设置:
const plugins = ["@babel/plugin-transform-runtime"]
...
["@babel/preset-env", { "modules": false }]
  1. 执行打包命令即可:

修改后的部署结果:

npm run build:h5

1628239816699017696.png

总结

  • 这里jenkins报错的原因一个是其它项目打包需要node14环境,然后执行命令时并没有对binding.node文件进行重新构建,所以使用了基于低版本node构建的binding.node文件,这就意味着如果以后如果切换了node版本依然还是会有这个问题的,所以可以考虑在构建脚本中适当增加npm rebuild node-sass命令来处理
  • js代码转译问题,如果代码使用到了一些js新特性就需要相应借助babel的语法转换来进行polyfill操作

参考资料

相关文章
|
4天前
|
JavaScript API
【Azure Function】Function App门户上的Test/Run返回错误:Failed to fetch
Running your function in portal requires the app to explicitly accept requests from https://portal.azure.cn. This is known as cross-origin resource sharing (CORS).Configure CORS to add https://portal.azure.cn to allowed origins.
|
2月前
|
网络协议 容器
【Container App】部署Contianer App 遇见 Failed to deploy new revision: The Ingress's TargetPort or ExposedPort must be specified for TCP apps.
Failed to deploy new revision: The Ingress's TargetPort or ExposedPort must be specified for TCP apps.
74 27
|
6月前
|
C#
【Azure Function】Function App启动时出现 Failed to open local port 4001 错误,这是什么情况呢?
【Azure Function】Function App启动时出现 Failed to open local port 4001 错误,这是什么情况呢?
|
6月前
【Azure Function App】在ADF(Azure Data Factory)中调用 Azure Function 时候遇见 Failed to get MI access token
【Azure Function App】在ADF(Azure Data Factory)中调用 Azure Function 时候遇见 Failed to get MI access token
|
6月前
|
Java
【Azure 应用服务】在App Service 中如何通过Managed Identity获取访问Azure资源的Token呢? 如Key Vault
【Azure 应用服务】在App Service 中如何通过Managed Identity获取访问Azure资源的Token呢? 如Key Vault
|
6月前
|
关系型数据库 MySQL Linux
【Azure 应用服务】[App Service For Linux(Function) ] Python ModuleNotFoundError: No module named 'MySQLdb'
【Azure 应用服务】[App Service For Linux(Function) ] Python ModuleNotFoundError: No module named 'MySQLdb'
|
6月前
|
Java Spring
【Azure 应用服务】记一次Azure Spring Cloud 的部署错误 (az spring-cloud app deploy -g dev -s testdemo -n demo -p ./hellospring-0.0.1-SNAPSHOT.jar --->>> Failed to wait for deployment instances to be ready)
【Azure 应用服务】记一次Azure Spring Cloud 的部署错误 (az spring-cloud app deploy -g dev -s testdemo -n demo -p ./hellospring-0.0.1-SNAPSHOT.jar --->>> Failed to wait for deployment instances to be ready)
|
9月前
Error:Execution failed for task ':app:javaPreCompileDebug'. > Annotation processors must be explicit
Error:Execution failed for task ':app:javaPreCompileDebug'. > Annotation processors must be explicit
109 0
|
9月前
|
缓存 Java 开发工具
Error:Execution failed for task ‘:app:preDebugAndroidTestBuild’. Conflict with dependency ‘com.andr
Error:Execution failed for task ‘:app:preDebugAndroidTestBuild’. Conflict with dependency ‘com.andr
42 1
|
9月前
|
Java 数据库 索引
GreenDao,clearIdentityScope报错Error:Execution failed for task ':app:compileDebugJavaWithJavac'. > Com
GreenDao,clearIdentityScope报错Error:Execution failed for task ':app:compileDebugJavaWithJavac'. > Com
69 1

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    微信小程序 app.json 配置文件解析与应用
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 6
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 8
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 9
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 10
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
  • 1
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    32
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    27
  • 3
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    23
  • 4
    【Azure Function】Function App门户上的Test/Run返回错误:Failed to fetch
    30
  • 5
    陪玩APP推送配置:陪玩系统手机锁屏收不到推送?可能是这些原因!解决方案来了!
    34
  • 6
    小游戏源码开发之可跨app软件对接是如何设计和开发的
    32
  • 7
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    134
  • 8
    PiliPala:开源项目真香,B站用户狂喜!这个开源APP竟能自定义主题+去广告?PiliPala隐藏功能大揭秘
    58
  • 9
    语音app系统软件源码开发搭建新手启蒙篇
    44
  • 10
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
    845