解決Windows和Linux使用npm打包js和css文件不同的問題


1、問題出現

  最近公司上線前端H5頁面,使用npm打包,特別奇怪的是每次打包發現css和js文件與Windows下打包不一致(網頁使用Windows環境開發),導致前端頁面功能不正常。

2、問題排查

  ① 更換服務器:無用

  ② 更換npm版本:無用

  ③ 在另一台Windows上打包:無用

  ④ 等等網上說的方法:無用

3、我是如何確認是css和js文件不一致的

  ① 首先我在Linux打包機器上正常打包

  

  ② 打包過程中無任何報錯,之前上線也是如此。(所以一開始並沒有發現是打包問題)

  ③ 通過瀏覽器打開css和js文件,發現與正常頁面確實有所差異,於是讓前端開發重新打了一次包與我打包的進行比對

  

  ④ 發現最重要的一個js文件確實不一樣,於是確認是npm打包出現問題。

4、我是如何找出npm打包問題的原因的

  利用npm打包上線需要經過以下步驟:

  ① 克隆代碼到本地

  ② 安裝npm依賴環境

  ③ build

  於是斷定問題出現在了npm依賴環境上

  安裝npm依賴環境:npm install --registry=https://registry.npm.taobao.org

  上述命令是根據package.json進行安裝的,安裝完成后,使用npm list查看對應模塊版本,發現都被默認升級

  再次嘗試:

    ① 使用命令npm shrinkwrap鎖定依賴版本:無用

    ② 單獨安裝模塊:無用

  到此時已經發現問題的根源,但是無法解決,還是對npm不太了解。

5、再次嘗試

  向開發要來了他Windows下npm所用的所有環境和模塊,准備嘗試手動安裝,並保持全部一致。

  安裝過程中,突然想起來當初遷移python項目時也出現過相似的環境依賴問題,當時最終的解決辦法時直接拷貝整個python環境到新環境,然后解決問題。

  於是再次向開發要了他當前環境的node_modules整個目錄,首先在Windows上嘗試。

  解壓后執行命令:npm list

  發現和開發Windows的模塊一致,繼續執行npm run build

  發現激動人心的結果

  打包完畢后,js文件與開發打包的保持一樣,上線測試環境,一切正常。

6、最終解決

  按照相同的方法,拷貝整個node_modules目錄到Linux打包機上。

  執行nvm list:結果一致

  執行npm run build,再次報錯,如下:意思就是Node.js 6.X是基於Windows 64-bit,不支持當前Linux環境

   網上搜索此錯誤查到結果,執行命令:npm rebuild node-sass,即可解決。(也可注釋build的配置.【..(config.dev.useEslint ? [createLintingRule()] : [])】)

 

  再次打包:npm run build,終於看到久違的結果

  

  至此,Windows下的項目遷移到Linux上完畢。問題的根本原因:依賴

 

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM