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上完畢。問題的根本原因:依賴