rewrite-import-cli
v0.0.3
Published
重写vue中路由导入写法,require改写为import
Downloads
5
Maintainers
Readme
重写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
路由路径,输入一个要处理的 路径,可以是一个文件
- 有的项目,所有的 路由都放在一个文件, 可以指定文件
- 有的项目分了模块,拆分了不同的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'
]