前言

这几天在写 vite 项目时遇到了一个问题，以前在写导入 SVG 需求的时候都是用 require 去实现的，但由于 vite 是一个基于 ES 模块的前端工具，默认不支持require 方法，因为 require 是 NodeJS 和 Webpack 的方法，而不是标准的 ES 模块语法。

查询

通过一顿搜索，发现了vite-plugin-require插件，可以让vite支持require方法，然后我一高兴啪啪啪的敲好了代码。唉？报错了！怎么回事？

原来是 require 只能用于静态导入，那就只能乖乖拼接了。

<img src={require('../../../image/icons/normal/' + name + '.svg')} alt='test' />

但除此之外还有一个问题，因为我需要的是导入后当作组件来使用的，当我导入后使用时控制台就报错了，看着这一摊红色我陷入了沉思。

解决

在我还纠结于找插件解决的时候，我突然想到 vite 是基于 ES 模块的工具，ES 规范用的是 import。那我为什么不直接用 import 解决呢？ 很快啊，我又敲好了代码。

NormalIconRef.current = await import(`../../../image/icons/normal/${name}.svg`)

不出意外的话要出意外了，没错，又报错了。

不过这次的问题比较简单，只需要取出返回的 ReactComponent 就可以了。所以代码要改成：

NormalIconRef.current = (await import(`../../../image/icons/normal/${name}.svg`)).ReactComponent

总结

虽然是小问题，但是解决的过程还是挺有意思的，也查到了不少好用的插件。稍微总结一下，require 一般使用在静态导入的时候，因为它是在运行时同步执行的，当 NodeJs 解释器遇到 require 语句时，它会立即读取并执行指定的模块文件，由于这个过程是同步的，所以模块文件的路径必须在编译时就确定了，这样解释了为什么在模板语法中嵌入时动态生成的路径不可以了。而 import 多数用在动态导入，这个过程是异步的，在解析时会先解析出模块的路径，然后才会根据路径查找模块文件并读取。