zoukankan      html  css  js  c++  java
  • 解决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上完毕。问题的根本原因:依赖

      

  • 相关阅读:
    动态表单实现客户端二次过滤及字段汇总统计
    开放一些常见功能的工具类代码
    动态表单
    客户中增加按钮提前判断是否撞单 并提示
    通过插件来对打印数据进行处理
    mac 升级10.12 php debug 环境 跑不起的解决 解决方案
    感觉世界变化太快...
    Mac 升级一次,php 就崩溃一次,有味,苹果....
    http://s22.app1105796624.qqopenapp.com/
    unity 2d 游戏优化之路 遇坑记录
  • 原文地址:https://www.cnblogs.com/dukuan/p/8195158.html
Copyright © 2011-2022 走看看