重写vue-router中的import

背景

webpack 提供了 require的方式导入模块， 但是我们希望统一改为 import的写法

component: (resolve) => require(['@/views/xxxx/retrieveCaptcha/index.vue'], resolve),

希望改成

 component: () => import('@/views/xxxx/retrieveCaptcha/index.vue'),

项目越来越大的时候，修改比较吃力， 如果是webpack 迁移到 vite项目工程，迁移难度也比较大

所以，写了这样一个工具，一键转换

功能

• 转换 require 为 import
• 转换后的代码，复用项目中的 prettier配置，对代码做格式化处理（如果不存在，则忽略）

安装

建议全局安装使用

npm i rewrite-import-cli -g

使用

re-import

过程

PS D:\projects\os> re-import
? 项目运行根目录:  D:\projects\os Yes
? 路由路径 src/router

路由路径，输入一个要处理的 路径，可以是一个文件

1. 有的项目，所有的 路由都放在一个文件， 可以指定文件
2. 有的项目分了模块，拆分了不同的js文件存放路由， 可以直接指定父目录

案例整个运行日志输出：

PS D:\projects\os> re-import
? 项目运行根目录:  D:\projects\os Yes
? 路由路径 src/router
拿到的所有路由文件： 【16】个
[
  'D:\\projects\\os\\src\\router\\index.js',
  'D:\\projects\\os\\src\\router\\modules\\workbench.js',
  'D:\\projects\\os\\src\\router\\modules\\technology.js',
  'D:\\projects\\os\\src\\router\\modules\\systemManage.js',
  'D:\\projects\\os\\src\\router\\modules\\subSystem.js',
  'D:\\projects\\os\\src\\router\\modules\\personalComplaint.js',
  'D:\\projects\\os\\src\\router\\modules\\personalCenter.js',
  'D:\\projects\\os\\src\\router\\modules\\home.js',
  'D:\\projects\\os\\src\\router\\modules\\handleError.js',
  'D:\\projects\\os\\src\\router\\modules\\dogcart.js',
  'D:\\projects\\os\\src\\router\\modules\\dataServer.js',
  'D:\\projects\\os\\src\\router\\modules\\chatMessages.js',
  'D:\\projects\\os\\src\\router\\modules\\businessSystem.js',
  'D:\\projects\\os\\src\\router\\modules\\baoganManage.js',
  'D:\\projects\\os\\src\\router\\modules\\assetInventory.js',
  'D:\\projects\\os\\src\\router\\modules\\addressList.js'
]
项目的配置文件对象
{
  printWidth: 200,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  quoteProps: 'as-needed',
  jsxSingleQuote: false,
  trailingComma: 'none',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'avoid',
  htmlWhitespaceSensitivity: 'ignore',
  vueIndentScriptAndStyle: false,
  endOfLine: 'auto'
}
转换完成
有require的文件清单 【12】个
[
  'D:\\projects\\os\\src\\router\\modules\\workbench.js',
  'D:\\projects\\os\\src\\router\\modules\\technology.js',
  'D:\\projects\\os\\src\\router\\modules\\systemManage.js',
  'D:\\projects\\os\\src\\router\\modules\\personalComplaint.js',
  'D:\\projects\\os\\src\\router\\modules\\personalCenter.js',
  'D:\\projects\\os\\src\\router\\modules\\home.js',
  'D:\\projects\\os\\src\\router\\modules\\handleError.js',
  'D:\\projects\\os\\src\\router\\modules\\dogcart.js',
  'D:\\projects\\os\\src\\router\\modules\\dataServer.js',
  'D:\\projects\\os\\src\\router\\modules\\chatMessages.js',
  'D:\\projects\\os\\src\\router\\modules\\businessSystem.js',
  'D:\\projects\\os\\src\\router\\modules\\addressList.js'
]