《Vite 基础知识》Vite 不支持 require 解决方案(三种情况/require is not defined)

前言

首先,Vite 中没有 require 相关方法,因为它默认支持 ESM 方式加载模块!

所以,我们要理清如下两个方法

方法 require()

方法 require.context()

Vite 提供解决方案,请接着往下看!

解决方案

require() 加载模块

报错 require 未定义

Uncaught (in promise) ReferenceError: require is not defined

js 复制代码
// 报错。CommonJS 方式加载
initNav() {
	const ElementResizeDetector = require('element-resize-detector');
	const erd = ElementResizeDetector();
}

解决方案

  • 使用 EMS import() 方法;
  • 注意 require()同步加载;
  • import()异步 加载,推荐使用 await 命令。当然也可以使用 then() 方法,因为其返回 Promise 对象;
js 复制代码
// 正确。方式一(推荐):ESM 方式加载,使用 await 命令
async initNav() {
	const ElementResizeDetector = await import('element-resize-detector');
	const erd = elementResizeDetectorMaker.default();
}


// 正确。方式二:ESM 方式加载,使用 then() 方法
initNav() {
	import('element-resize-detector').then(module => {
        const erd = module.default();        
    }).catch(err => {
        console.error('加载失败');
    });
}

require() 加载图片

报错 require 未定义

Possible Unhandled Promise Rejection: ReferenceError: require is not defined

vue 复制代码
<template>
	<img class="pwd-icon" :src="pwdIcon" >
</template>
<script>
export default {
	data () {
		return {
			pwdIcon2: require('../assets/images/pwd-icon.png'),
		}
	}
}
</script>

解决方案

使用 EMS import 命令;

vue 复制代码
<template>
	<img class="pwd-icon" :src="pwdIcon" >
</template>
<script>
import PwdIcon from '../assets/images/pwd-icon.png'
export default {
	data () {
		return {
			pwdIcon: PwdIcon,
		}
	}
}
</script>

require.context() 批量加载文件

报错 require 未定义

Possible Unhandled Promise Rejection: ReferenceError: require is not defined

js 复制代码
// require 是同步加载
const modulesFiles = require.context('./src/components', true, /\.vue$/);

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
    modules[moduleName] = modulesFiles(modulePath).default;
    return modules;
}, {});

解决方案

使用 import.meta.glob ,可异步同步 加载。详见《Vite 基础知识:使用 Glob 动态加载 .vue 文件》

js 复制代码
// 异步,返回 Promise 对象
const modules = import.meta.glob('./src/components/**/*.vue');

for (const path in modules) {
    modules[path]().then((mod) => {
        console.log(path, mod.default);
    })
}

// 同步,配置参数 { eager: true }
const modules = import.meta.glob('./src/components/**/*.vue', { eager: true });

for (const path in modules) {
    console.log(path, modules[path].default);
}
相关推荐
Littlewith13 小时前
Node.js:创建第一个应用
服务器·开发语言·后端·学习·node.js
墨菲安全13 小时前
Node.js Windows下路径遍历漏洞
windows·node.js·路径遍历漏洞
码间舞13 小时前
【面试官】:NodeJs事件循环你了解多少?我笑了,让我喝口水慢慢给你说来......
后端·node.js
Komorebi_999920 小时前
webpack相关
前端·webpack·node.js
伍哥的传说1 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
半桶水专家1 天前
webpack和vite对比
前端·webpack·node.js
Q_Q19632884751 天前
python的抗洪救灾管理系统
开发语言·spring boot·python·django·flask·node.js·php
孤独的根号_1 天前
Vite背后的技术原理🚀:为什么选择Vite作为你的前端构建工具💥
前端·vue.js·vite
i小溪2 天前
Fanuc机床 CNC_STATINFO 方法返回值说明
物联网·node.js
梦想CAD控件2 天前
在线CAD实现形位公差标注(在线编辑DWG)
前端·javascript·node.js