首页 技术设计 前端 vite

# 前言

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

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

# 方法 require ()

  • Node.JS 原生方法 ，以 CommonJS 方式加载模块 / 文件 / 图片；
  • Webpack 默认支持 ， Vite 不支持；

# 方法 require.context ()

  • Webpack 特定方法，此方法可实现自定义上下文；
  • Vite 不支持；

但 Vite 提供解决方案，请接着往下看！

# 解决方案

# require () 加载模块

报错 require 未定义

Uncaught (in promise) ReferenceError: require is not defined
// 报错。CommonJS 方式加载
initNav() {
	const ElementResizeDetector = require('element-resize-detector');
	const erd = ElementResizeDetector();
}

解决方案

  • 使用 EMS import() 方法；
  • 注意 require() 是同步加载；
  • import() 是异步加载，推荐使用 await 命令。当然也可以使用 then() 方法，因为其返回 Promise 对象；
// 正确。方式一（推荐）：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
<template>
	<img class="pwd-icon" :src="pwdIcon" >
</template>
<script>
export default {
	data () {
		return {
			pwdIcon2: require('../assets/images/pwd-icon.png'),
		}
	}
}
</script>
解决方案
使用 EMS import 命令；
<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
//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 ，可异步和同步加载。
// 异步，返回 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);
}