• 解决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上完毕。问题的根本原因:依赖

      

  • 相关阅读:
    POJ2481(树状数组:统计数字 出现个数)
    jenkins(2)-linux环境下jenkins启动/重启/停止命令
    jenkins(1)-部分插件由于缺少依赖无法加载。要恢复这些插件提供的功能,需要修复这些问题并重启Jenkins的解决办法
    linux(4)-rpm包安装
    charles(2)-charles如何打断点,修改Request数据
    charles(1)-charles如何打断点,修改Response数据
    linux(3)-普通用户如何切换到root
    jmeter(51) Groovy脚本高级实战
    jmeter(49)-jenkins+ant+jmeter持续集成接口自动化测试-(linux环境)
    Codeforces Round #545 (Div. 2)D(KMP,最长公共前后缀,贪心)
  • 原文地址:https://www.cnblogs.com/dukuan/p/8195158.html
Copyright © 2020-2023  润新知