写个工具助 vue-cli 迁移到 vite

前言

我之前把 vue-cli 项目往 vite 迁移,因为 vite 中引入 vue 文件需要完整的路径,require 引入静态资源这种方式不支持,后面都是自己手动改的,工作量也比较大,改完之后发现自己傻傻的,还不如写个脚本处理。

然后就写了个小工具,后面大家往 vite 迁移的时候,也就不用在这个方面浪费时间了。

vite-fix-syntax

install

npm i vite-fix-syntax -g

目前特性:

  1. require 语法转换
  2. import 引入 vue 文件的路径补全

效果

同步语法

// 转换前
import demo from '@/components/demo'

// 转换后(文件真实路径,.vue || /index.vue)
// import demo from '@/components/demo/index.vue'
import demo from '@/components/demo.vue'

异步语法

// 转换前
const demo = () => import('@/components/demo')

// 转换后(文件真实路径,.vue || /index.vue)
// const demo = () => import('@/components/demo/index.vue')
const demo = () => import('@/components/demo.vue')

引入资源

// 转换前
const svg = require('@/assets/name.svg')

// 转换后
import name from '@/assets/name.svg' // 提升至顶层

const svg = name

install

npm i vite-fix-syntax -g

options

  • fixAll

    • Type: boolean
    • Default: false
    • Desc: 是否执行所有修复命令
  • fixPath

    • Type: boolean
    • Default: false
    • Desc: 是否补全路径
  • fixRequire

    • Type: boolean
    • Default: false
    • Desc: 是否修复 require 语法
  • config

    • Type: string
    • Default: syntax-replace.js
    • Desc: 配置文件名

config

  • alias

    • Type: object
    • Default: {}
    • Description: 项目中自定义的别名,需要根据他来推测真实路径
  • globOptions

    • Type: object
    • Default: { patterns: 'src/**/*.{js,jsx,vue}', options: { ignore: ['node_modules'], onlyFiles: true } }
    • Description: 匹配文件选项,基于fast-glob
    • Link: fast-glob

示例

const path = require('path')

module.exports = {
  alias: {
    '@': path.resolve('src')
  },
  globOptions: {
    patterns: 'src/**/*.{js,jsx,vue}',
    options: { ignore: ['**/a.js'] }
  }
}

example

修复路径

// 进入项目根目录
cd my-project

vite-fix-syntax --fixPath

修复 require

cd my-project

vite-fix-syntax --fixRequire

全部修复

cd my-project

vite-fix-syntax --fixAll

指定自定义配置文件

cd my-project

vite-fix-syntax --fixAll --config my-syntax-replace.js

最后

大家有什么问题可以给我提 issue,或者有什么建议往里加的功能也可以和我说,再者有其他迁移方面的问题,也可以交流交流。