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,即可解决。

  再次打包:npm run build,终于看到久违的结果

  

  至此,Windows下的项目迁移到Linux上完毕。问题的根本原因:依赖

  

解决Windows和Linux使用npm打包js和css文件不同的问题的更多相关文章

  1. ASP.NET中母版页引用外部js或css文件无效,提示对象未定义解决方法

    最近做网站用了一个js+css实现的带有二级菜单的导航条,在母版页创建好后,子页面调用出现了许多奇怪的问题,多方查证后的最终解决方案和大家分享下.... 1.路径问题 如果是一个单独的aspx页面调用 ...

  2. grunt 单独压缩多个js和css文件【转】

    原文地址:http://xiaomiya.iteye.com/blog/2177877 使用grunt来压缩前端js,css文件 因为最近做的客户端本地项目有用到十几个js,js提交之前都需要压缩.用 ...

  3. JavaScript使用localStorage缓存Js和css文件

    对于WebApp来说,将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间.特别是当移端信号不好高延迟时优化效果还是很显见的 下面的代 ...

  4. 使用Maven构建Java Web项目时,关于jsp中引入js、css文件路径问题。

    今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...

  5. [转][前端优化]使用Combres合并对js、css文件的请求

    本文转自:http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.ht ...

  6. 为js和css文件自动添加版本号

    web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服 ...

  7. 引用:使用grunt 压缩 合并js、css文件

    引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt   目录.png 2.在grunt目录下创建一个 src目录,存 ...

  8. [Asp.net MVC]Bundle合并,压缩js、css文件

    摘要 在web优化中有一种手段,压缩js,css文件,减少文件大小,合并js,css文件减少请求次数.asp.net mvc中为我们提供一种使用c#代码压缩合并js和css这类静态文件的方法. 一个例 ...

  9. 项目中对模板和js,css文件进行压缩的处理类

    我们知道,在html的页面中,所有空格和换行符其实都会占据一定的空间,即使使用了gzip压缩,在传输过程中依然会浪费用户的流量和我们自己服务器的带宽,此脚本就是为了解决这个问题而诞生的. 请自行下载G ...

随机推荐

  1. Python3_打开和运行方式

    蹬蹬蹬--第一次写博客,如有错误欢迎指正. Python很火,前几天也是因为需要装了一下,但是并没有用它,今天打开准备刚准备试下,才发现自己对这个软件一无所知,百度了一些资料发现并不能用才知道pyth ...

  2. 51Nod--1051最大子矩阵和(DP入门)

    分析: 我们已经解决了一维的问题(基础篇中的最大子段和问题),现在变成二维了,我们看看能不能把这个问题转化为一维的问题.最后子矩阵一定是在某两行之间的.假设我们认为子矩阵在第i行和第j列之间,我们如何 ...

  3. Java数据结构和算法(七)——链表

    前面博客我们在讲解数组中,知道数组作为数据存储结构有一定的缺陷.在无序数组中,搜索性能差,在有序数组中,插入效率又很低,而且这两种数组的删除效率都很低,并且数组在创建后,其大小是固定了,设置的过大会造 ...

  4. indexOf 和 lastIndexOf的区别

    indexOf 和  lastIndexOf 是什么? indexOf 和 lastIndexOf 都是索引文件 indexOf 是查某个指定的字符串在字符串首次出现的位置(索引值) (也就是从前往后 ...

  5. DOMContentLoaded、readystatechange、load、ready详谈

    对前端同学而言,loade,unload,DOMContentLoaded等页面加载过程中会触发的事件肯定是都接触过,不过要是具体问各个事件的区别,我就不是那么能清晰的解答上来的了.正好刚刚在无阻塞脚 ...

  6. ADC/DAC设计常见40问

    本文章是关于ADC/DAC设计经典问答,涵盖时钟占空比.共模电压.增益误差.微分相位误差.互调失真等常见问题. 1. 什么是小信号带宽(SSBW)? 小信号带宽(Small Signal Bandwi ...

  7. 【SqlServer系列】语法定义符号解析

    1   概述 在数据库函数定义中,经常用到这些符号:<>,::=,[],{},|,..,(),!!   .这篇文章简要概述这些符号. 2   具体内容 2.1  <> < ...

  8. Java基础(四)-异常处理机制及其设计

    本篇主要是记录自己所理解的Java异常处理机制(基于jdk1.7)以及怎么去处理和设计异常.还记得当初学习Java异常这块的时候都没怎么注意它的用途,以为就是简单的处理下异常,我避免程序出现这样错误就 ...

  9. Hibernate(或其它ORM)里的inverse用法详解,内容摘自Java web轻量级开发面试教程

    本文来是从 java web轻量级开发面试教程从摘录的. Inverse的英文含义是反转,在Hibernate中用来决定是由哪方来维护两个业务实体类之间的关联关系,具体而言,就是由哪方去设置这个被外键 ...

  10. final关键字细节

    final关键字在java中是一个很重要的关键字,其实按照其字面意思理解,就可以一窥这个关键字端倪,final的本意是最终的.所谓最终的,其最重要的特征就是不能修改,由此衍生出的许多细节均应以这个特征 ...