HTML5教程

前端项目 node8升级到node16,代码升级汇总

本文主要是介绍前端项目 node8升级到node16,代码升级汇总,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

背景

  公司的项目是vue项目,环境是node@8x版本的,最近我创建react hook的项目,发现至少需要node14才支持,打开官网才发现node都已经到16版本了。失策啊,失策。于是直接升级到最高版本。结果项目直接跑不起来了,看了下日志问题挺多的。我折腾了小1天才弄好。里面坑不少,最关键的是网上好多人的帖子太操蛋了,太水了。在这立个贴,和大家分享一下,如果遇到一样的问题,应该会有很大的帮助。 

  对了,我升级的是vue2.0的项目,而我vue3.0的项目完全不受影响。原因嘛,我大致看了下package.json文件,cli都是最新的,而且没有node-sass。我想可能是内置了。所以在这再提醒一下,老版本vue-cli创建的项目,应该会遇到和我一样的问题。

 

问题和解决方法汇总

  1、node-sass 升级,直接导致项目运行失败

  2、如果用vue-cli创建的项目需要升级,webpack支持到5.0版本,自己搭建的得自己升级了

  3、polyfill 弃用了,使用 core-js   regenerator-runtime

  4、

 

具体操作

  1、首先安装node最新版本,截至我发帖时间,最新稳定版本为 node16.13.1,

  2、更新node-sass,每个版本的node,都会有对应版本的node-sass。而且好像是14之后的版本更新很大,直接不兼容了,所以会报错。这里我们先去下载node-sass的版本包  点这里下载  ,下载第一个文件(下边有贴图)。下载成功之后,将这个包,放到你的账户下,具体路径是  C:\Users\你的用户名\AppData\Roaming\npm-cache\node-sass  , 然后创建一个名为 6.0.1  的文件夹,然后把刚下载的包,复制到这个文件夹中。我下面都贴图了。这样能保证你安装node-sass依赖的时候不会一直报错。

  3、安装node-sass@6.0.1,npm i --save node-sass@6.0.1   如果还是报错,检查一下上述几步是否有漏的,正常不会报错了。

  4、升级vue-cli,以下是正常的升级流程。先试一下,可能会有人更新失败,再说一个粗暴点的方法,用vue-cli直接创建一个vue2.0的新项目,将老项目node-modules删除,将新项目的node-modules复制过来,然后新项目的package.json的  devDependencies  部分,一条条的替换老项目的,一共三四条。

   vue -V             检查当前vue-cli的版本, 如果报错 指令不存在 或者没权限啥的,  在powershell里面执行  start cmd 直接打开cmd输入这些指令           
    npm uninstall vue-cli -g    卸载老版本
    npm install -g @vue/cli     全局安装新版本
    vue -V             检查版本号,我的是4.5.15
    vue upgrade          升级项目中脚手架相关的包

 

   5、然后保险起见,还是删除整个node-dules,删除package-lock.json,都清空。

   6、删除整个node-dules,看一下main.js和package.json 有没有使用 @babel/polyfill 这个依赖,这个包现在已经废弃了,换成了  core-js   regenerator-runtime 这两个包,装一下这两个依赖,然后修改main.js入口文件,去掉废弃的,增加新的2个,下面有代码贴图。

  npm uninstall @babel/polyfill  // 卸载@babel/polyfill
  npm install core-js
  npm install regenerator-runtime

  7、重新执行 npm install ,安装所有依赖,重新启动项目即可

 

 

 

node-sass版本的图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

总结

  东西其实不多,主要卡在node-sass安装一直失败,手动添加了版本包。在一个就是新版本的cli都用的 core-js,需要改项目代码,否则就会一堆报错,提示缺各种依赖。这两块浪费了我大量的时间,网上一堆没用的文章,各种粘贴复制、转载,真的想骂娘。

  最后,建议大家搜索的东西的时候加上  -(CSDN) -(脚本之家)     哈哈,把垃圾信息都屏蔽掉。基本剩下的都是博客园、简书啥的,

这篇关于前端项目 node8升级到node16,代码升级汇总的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!