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

      

  • 相关阅读:
    五秒原则,做一件事之前数 5 秒,1,2,3,4,5 立马去做。比如睡觉:数五秒,立马放下手机,闭眼。
    Perl 安装 JSON 包
    Perl: hash散列转换为Json报错集, perl.c,v $$Revision: 4.0.1.8 $$Date: 1993/02/05 19:39:30 $
    叫法: 表名 表字段名 定义每个表字段
    失误1: 把i放到循环体内部,i++失效
    沈南鹏@《遇见大咖》: A轮没投,投了8个月以后就证明了张一鸣是对了,在美国都没有张一鸣这种模式
    xshell通过xftp传输Windows文件到Linux:在输入put后,再摁 TAB 键,可显示当前文件夹的文件
    LeetCode84 Largest Rectangle in Histogram
    全排列问题及其引申问题
    LeetCode Weekly Contest 8
  • 原文地址:https://www.cnblogs.com/dukuan/p/8195158.html
Copyright © 2011-2022 走看看