Node.js躬行记(17)——UmiJS版本升级

简介:   在2020年我刚到公司的时候,公司使用的版本还是1.0,之后为了引入微前端,迫不得已被动升级。

一、从 1.0 到 2.0

  在官方文档中,有专门一页讲如何升级的,这个用户体验非常好。

  一个清单列的非常清楚,内容不多,让我信心大增。并且自己之前也曽依托 umi 2.0开源过一套系统

  所以在实际操作中,升级遇到的阻力没有我想象中的那么大,但期间还是遇到了些难缠的问题,诸如页面空白,文件不存在等。

  具体的改造其实就那么几步,升级和替换依赖库,更正路由配置,去除过时文件等。

  改造好后,自己粗略的刷刷页面,没啥问题,然后就开心地发布到预发环境。但是在生成source map文件时,报内存栈溢出。

  source map文件主要用于监控系统中的代码还原,在实际使用中用的比较少,那就先暂时关闭了。

  不过在生产发布的时候,又会报没有source map文件,因为生产有个将文件搬移到指定位置的脚本,得把这个脚本也关闭。

二、从 2.0 到 3.0

  为了能更好的引入TypeScript,提升项目代码质量的主动升级,根据官方给出的升级文档进行了改造。

1)router改造

  原先 component 中的路径可以包含斜杠,现在不行,因为 Recommend 目录中没有默认的 index.js 文件。


{
  path: '/video/recommend',
  exact: true,
  component: 'video/Recommend/',
}
改成
{
  path: '/video/recommend',
  exact: true,
  component: 'video/Recommend',
}


2)model.js验证

  默认会做 model 文件的验证,但是我有个文件中包含 jsx 代码,导致无法验证通过,会报解析错误。

Dva model src/models/playViewer.js parse failed, SyntaxError: Unexpected token, expected "," (71:20)

  后面就在 .umirc.js 配置文件中取消了验证,skipModelValidate 设置为 true。

export default {
  antd: {},
  dva: {  // 启用引入dva
    skipModelValidate: true   //跳过 model 验证
  },
}

3)namespace不唯一

  项目构建的时候,报model的namespace重名的错误,因为 pages 子目录中的文件名都叫model.js。

pages
    foo/model.js
    bar/model.js

  下面是具体的报错信息,查了框架的issue,发现还蛮多人有这问题的,但是我都升级到最新版本还是有问题。

./src/.umi/plugin-dva/dva.ts
[app.model] namespace should be unique
app.model({ namespace: 'model', ...ModelModel29 });
app.model({ namespace: 'model', ...ModelModel30 });
app.model({ namespace: 'model', ...ModelModel31 });
app.model({ namespace: 'model', ...ModelModel32 });

  后面发现将文件改个名字,然后放到models目录中,就不会唯一了。但是有300多张页面,都得手动处理。

pages
    foo/
        models/login.js
    bar/model.js

  没有找到更有效更直接的方法,只能用这种笨办法了,弄了好几个小时。

  中途也发现,很多页面已经废弃了,马上决定移除。

4)Link组件

  之前Link组件都是从react-router-dom导入的,但现在会报错:Error: Invariant failed: You should not use <Link> outside a <Router>。

  这个好弄,只要换个库就行。

- import { Link } from 'react-router-dom';
+ import { Link } from 'umi';

5)警告

  有个比较奇怪的警告,会一直提示,网上很多重复的帖子就是去本地 dva 库替换某条语句,还有就是升级到 2.6 版本。

Warning: Please use `require("history").createHashHistory` instead of `require("history/createHashHistory")`. Support for the latter will be removed in the next major release.

  我升级到最新后,还是会有这个提示,就看源码,发现注释掉 dva/router.js 的第一句就行了,不过发到线上后,就不会有这个警告了。

require('./warnAboutDeprecatedCJSRequire.js')('router');
module.exports = require('react-router-dom');
module.exports.routerRedux = require('connected-react-router');

 

相关文章
|
2月前
|
JavaScript 测试技术 API
跟随通义灵码一步步升级vue2(js)项目到vue3版本
Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有显著提升。本文介绍了如何利用通义灵码逐步将 Vue 2 项目升级到 Vue 3,包括备份项目、了解新特性、选择升级方式、升级依赖、迁移组件和全局 API、调整测试代码等步骤,并提供了注意事项和常见问题的解决方案。
|
2月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
60 4
|
1月前
|
JavaScript Linux iOS开发
详解如何实现自由切换Node.js版本
不同的项目中需要使用不同版本的 Node.js,有时旧项目需要旧版本,而新项目则可能依赖最新的 Node.js 版本
62 0
|
3月前
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
本文讨论了在配置Vite项目时遇到的`vite.defineConfig is not defined`错误,这通常是由于缺少必要的导入语句导致的。文章还涉及了如何创建最新版本的Vite项目以及如何处理`configEnv is not defined`的问题。
217 3
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
|
3月前
|
移动开发 前端开发 JavaScript
JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端
本文介绍了一个使用JavaScript和HTML5 Canvas API实现的贪吃蛇游戏的升级版本,该版本支持PC端和移动端,提供了丝滑的转向效果,并允许玩家通过键盘或触摸屏控制蛇的移动。代码中包含了详细的注释,解释了游戏逻辑、食物生成、得分机制以及如何响应不同的输入设备。
83 1
JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端
|
2月前
|
JavaScript 算法 内存技术
如何降低node.js版本(nvm下载安装与使用)
如何降低node.js版本(nvm下载安装与使用)
|
3月前
|
JavaScript Linux 开发者
一个用于管理多个 Node.js 版本的安装和切换开源工具
【9月更文挑战第14天】nvm(Node Version Manager)是一个开源工具,用于便捷地管理多个 Node.js 版本。其特点包括:版本安装便捷,支持 LTS 和最新版本;版本切换简单,不影响开发流程;多平台支持,包括 Windows、macOS 和 Linux;社区活跃,持续更新。通过 nvm,开发者可以轻松安装、切换和管理不同项目的 Node.js 版本,提高开发效率。
127 4
|
3月前
|
缓存 资源调度
解决node升级到18版本node-sass安装问题
解决node升级到18版本node-sass安装问题
|
Web App开发 JavaScript 前端开发
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
26 1
JavaScript中的原型 保姆级文章一文搞懂