前端灵异事件 好好的代码就我跑不起来?

写在开头

  • 前端灵魂拷问:

同一个项目,同一份代码,别人电脑上能跑,为什么自己电脑上就不行?

同一个项目,同一份代码,别人自己电脑上打包构建,为什么服务器上就不行?

Peter老司机这次带你们深刻的分析这个问题

那原因是什么啊?

原因一般不止一个,可能你当时出现问题,是姿势不对,又或者是环境问题,又或者是同事的操作不规范等等情况,我们接下来一一道来。

看之前记得来波关注:


原罪之一:npm/yarn等使用不规范

前端的依赖通过npm/yarn等包管理器来安装时,没有锁定版本,例如你的同事安装依赖时:

yarn add react --save 

那么这个版本到底是什么?众所周知,react在18版本之前,不能同时存在两个react,否则会报错,直接白屏

当同事使用yarn安装react时候,会生成一份yarn.lock文件,用于锁定这次安装的react版本信息,可是这个时候你把代码克隆下来,使用npm安装,然后启动项目,发现项目本身的react版本和其他第三方库的react版本不兼容,这个时候你就跑不起来了。

所以:多人开发协作,要统一包管理器,统一使用一份lock文件,用git管理这个文件来锁定依赖安装版本
另外,安装依赖时候尽量锁定版本,例如:
yarn add react@16.18.0 --save 

同理:当你的构建机器和本地开发机器使用的命令不一样时候,也会导致这个问题,例如本地使用yarn install,构建机器使用npm instasll

原罪之二:Node.js版本不一致

目前前端的工程化,都是大部分基于Node.js环境,node.js的版本发布升级很快,新老版本的api不兼容很正常,例如你的电脑上是16版本的nodejs,搭配了比较新的webpack版本,那样可以正常使用,但是一上构建机器,或者去了同事那边版本比较旧的电脑,就跑不起来了。

推荐使用nvm管理node.js版本,让电脑上存在多个nodejs版本

原罪之三:特殊环境配置

例如,电脑上缺少hosts配置,这个项目本身需要跑在特定的host上,但是你的电脑没有写入配置,就会导致项目无法启动

原罪之四:特定依赖源无法下载

这种要分情况:

一种是真的源在国外,比较慢,会经常超时,无法下载,也就无法启动(例如前端之痛node-sass

安装的时候可以指定源地址为淘宝镜像:
npm install -g mirror-config-china --registry=http://registry.npm.taobao.org

npm install sass-loader node-sass -D

一种是私有镜像源做了保护,在公网没有权限访问,安装时候控制台报401,需要开公司VPN

原罪之五:特定依赖下载后编译很久,或者无法编译通过

例如windows安装依赖时候提示:是没有安装python2.7环境

此时,你只需要执行这一条命令就会给你安装python环境

npm install --global --production windows-build-tools
跨平台开发,首选Mac电脑,会为你提前解决很多环境问题

原罪之六:端口被占用

外面有可能会同时启动多个项目,例如:当项目占用端口8080后,后面再启动项目,就会报端口倍占用

前端灵异事件 好好的代码就我跑不起来?_第1张图片

这个时候你需要调整启动的端口即可

结语

相信通过这六点总结,能解决你大部分项目中同一份代码却跑不起来的问题,要知道项目能在别人电脑上跑起来,你的电脑也一定可以。如果不可以,就是你的姿势问题

记得帮我公众号:前端巅峰来个:在看/赞/关注

你可能感兴趣的