【学一点儿前端】vue3+vite不能使用require引入包的问题(require is not defined)

07-14 636阅读

问题

今天本来想简单敲个码,结果遇到一个报错:require is not defined

【学一点儿前端】vue3+vite不能使用require引入包的问题(require is not defined)

原因

查了各方资料,原因如下:

前端有很多的工具包是commonjs的写法,只能用require引入,而vite+vue3构建的项目不能使用require,只能用import,为了能够方便地引入commonjs工具包,我们需要把这些工具包转为es module。

解决方案(vite2方案,下面有vite3方案)

使用 @rollup/plugin-commonjs 插件,用于将CommonJS模块转换为ES6模块的Rollup插件.

1、安装@rollup/plugin-commonis 插件

终端中输入

npm i @rollup/plugin-commonjs

2、在vite.config.ts配置中添加该插件,注意 commonjs0必须在vue()上面,否则不生效

import commonjs from '@rollup/plugin-commonjs';
const plugins = [
    commonjs() as any,// 要放在第一行,否则不生效
];

3、随意导入commonjs工具包

import SoftAlgorithm from '../SDK/soft-algorithm-min.js';
console.log('🚀 ~ SoftAlgorithm1111:', SoftAlgorithm);

结果

引入成功

【学一点儿前端】vue3+vite不能使用require引入包的问题(require is not defined)

附加:vite3 方案

前面我们使用的方法仅适用于vite2版本,我们还有另外一个vite3项目,但在最新的vite3中由于vite底层有改变,导致rollup/plugin-commonjs 不能正常使用,vite3可使用以下方案。

直接使用 vite-plugin-commonjs

1、安装vite-plugin-commonjs 插件

终端中输入

npm i vite-plugin-commonjs

2、在vite.config.ts配置中添加该插件,注意 commonjs0必须在vue()上面,否则不生效

import commonjs from 'vite-plugin-commonjs';
 
const plugins = [
    commonjs() as any,// 要放在第一行,否则不生效
];

参考资料

vite-plugin-commonjs 使用

VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]