老项目 umi2 升级umi3 踩坑全记录

星宇大前端

发布于 2022-05-06 17:25:16

1.9K0

发布于 2022-05-06 17:25:16

文章被收录于专栏：大宇笔记大宇笔记

老项目是用umi2 + js 写的，最近我们团队最近都是ts+umi3，最近一个项目比较大，想采用微前端的方式开发，需要把老项目兼容进去，所以继续umi2升umi3 统一umi-qiankun 插件。

按照官网配置

umijs 官网提供了升级事项，首先还是先按照官网上的来，把官方应该改的都改了。

这里就不多叙述了查看官网链接：

https://umijs.org/zh-CN/docs/upgrade-to-umi-3

关于Dva

umi2使用的dva 并不是插件的形式，以npm 包的形式的引入。

要删除npm package.json 依赖，并在配置配置dva:{}打开插件功能。

问题一：[app.model] namespace should be unique

我们umi2 的项目目录现在是这样的，都是文件夹业务模块里model.js 存放dva 逻辑层。model.js 会有命名空间。

升级完umi3 之后报错model 命名重复，找了下也没有发现重复的，但是在dva 看到model 的命名空间确实以model 文件名命名。

查看了umi3 dva 插件，确认了pages model.js 文件会以命名空间命名，但是现实不是，也提交了issue,现在没有得到回复：

https://github.com/umijs/plugins/issues/833

解决办法：

我试了下把model 移动到models 文件夹，会以文件命名命名空间不会重复。

但是太多了300多页面，一个一个移动要疯了，所以写了一个脚本。

脚本目的：

pages 下面业务文件夹里的model.js 改名为 文件名.js
将改名后的文件移动到models/pages 文件夹
model.js 的相对引用批量修改

第三部根绝业务定。

脚本：

const fs = require('fs');
const path = require('path');

let basePath = path.resolve(__dirname, '../src/pages');
let modelsPath = path.resolve(__dirname, '../src/models');

function migrateToModelsPage() {
  fs.readdirSync(basePath).forEach(file => {
    var pathname = path.join(basePath, file);
    fs.stat(path.join(pathname, '/model.js'), (err, stats) => {
      if (stats && stats.isFile()) {
        fs.rename(
          path.join(pathname, '/model.js'),
          path.join(modelsPath, `pages/${file}.js`),
          err => {
            if (err) throw err;
            console.log(file + 'Rename complete!');
            fs.readFile(path.join(modelsPath, `pages/${file}.js`), 'utf8', (err, data) => {
               if (err) throw err;
               let newContent = data.replace("from './service'",`from '@/pages/${file}/service.js'`)
               fs.writeFile(path.join(modelsPath, `pages/${file}.js`),newContent,'utf8',(err)=>{
                  if (err) throw err;
                  console.log('success done');
                })
            });
          }
        );
      }
    });
  });
}

migrateToModelsPage();