Vite+Vue3项目迁移Vue2项目下基于AMD、CMD、CommonJS规范开发的包或模块详细教程

问题

前言：webpack在很多时候都很强大，但是对于在vue2的时代做为脚手架工具对于代码热跟新，以及项目启动就显得很慢，当我们的项目所使用的模块越来越多，基于webpack的vue项目就越慢，很耗时。

Vite+Vue3可以完美的解决这些问题，但是其中有一个最致命的问题，在vue2时代有很多的模块和包都是基于AMD、CMD、CommonJS规范开发的，但Vite是基于ES Module的开发服务器，所以在Vite下基于AMD、CMD、CommonJS规范开发的包和模块是无法直接使用的。

那么如何解决？

解决办法

安装vite-plugin-require-transform，配置vite.config.js文件后，require等就可以正常使用了。

一、安装

npm i vite-plugin-require-transform

二、在vite.config.js中配置

import { defineConfig } from 'vite'
import requireTransform from 'vite-plugin-require-transform';
 
export default defineConfig({
  plugins: [
    requireTransform({
      fileRegex: /.js$|.vue$/
    }),
  ],
});

三、在Vue3项目中使用基于AMD、CMD、CommonJS规范开发的包和模块

<script setup>
import { ref } from "vue";
//使用Nodejs基于CommonJS规范开发的npm包，vue-canonical-encyclopedia包含常用的几乎所有的正则。
const R=require('vue-canonical-encyclopedia');
const title_Rules1=R.Regular.Chinese;
const cate_id_Rules1=R.Regular.Number;
</script>

本文原创，原创不易，如需转载，请联系作者授权。