天天看點

uni-app指令行建構Module parse failed:Unexpected token錯誤處理

背景

最近在使用公司内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)

是以這裡按部就班就可以了,但是接下來卻又報出了如文章标題所示的錯誤:

uni-app指令行建構Module parse failed:Unexpected token錯誤處理

經過一番調查之後,發現是項目内含有可選鍊操作符這種新特性,但是缺少庫來進行轉譯操作導緻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           
uni-app指令行建構Module parse failed:Unexpected token錯誤處理

總結

  • 這裡jenkins報錯的原因一個是其它項目打包需要node14環境,然後執行指令時并沒有對binding.node檔案進行重新建構,是以使用了基于低版本node建構的binding.node檔案,這就意味着如果以後如果切換了node版本依然還是會有這個問題的,是以可以考慮在建構腳本中适當增加npm rebuild node-sass指令來處理
  • js代碼轉譯問題,如果代碼使用到了一些js新特性就需要相應借助babel的文法轉換來進行polyfill操作

參考資料