### require()
* [Node.JS 原生方法](https://nodejs.org/docs/latest/api/modules.html#requireid)，以`CommonJS`方式加載**模塊/文件/圖片**；
* [Webpack 默認支持](https://webpack.docschina.org/api/module-methods/#require)，`Vite`不支持；
### require.context()
* [Webpack 特定方法](https://webpack.docschina.org/api/module-methods/#webpack)，此方法可[實現自定義上下文](https://webpack.docschina.org/guides/dependency-management/#requirecontext)；
* `Vite`不支持；
## 解決方案
### require() 加載模塊
**報錯 require 未定義**
> Uncaught (in promise) ReferenceError: require is not defined
``` javascript
// 報錯。CommonJS 方式加載
initNav() {
const ElementResizeDetector = require('element-resize-detector');
const erd = ElementResizeDetector();
}
```
**解決方案**
* 使用[EMS import()](https://wangdoc.com/es6/module#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 未定義**
> Uncaught (in promise) ReferenceError: require is not defined
```js
export default {
data () {
return {
pwdIcon2: require('../assets/images/pwd-icon.png'),
}
}
}
```
**解決方案**
使用[EMS import](https://wangdoc.com/es6/module#import-%E5%91%BD%E4%BB%A4)命令；
~~~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](https://cn.vitejs.dev/guide/migration-from-v2#importmetaglob)，可**異步**和**同步**加載。詳見[《Vite 基礎知識：使用 Glob 動態加載 .vue 文件》](https://blog.csdn.net/sinat_31213021/article/details/135548940)
~~~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);
}
~~~
