让 vite 项目无痛支持
require("xxx")
vite-plugin-require
安装即可实现项目支持 require
语法,大部分情况下无需配置。
如果项目对你有用的话,请点个star吧!
QQ 交流群: 854445223
npm i vite-plugin-require | yarn add vite-plugin-require
import vue from '@vitejs/plugin-vue'
import vitePluginRequire from "vite-plugin-require";
export default {
plugins: [
vue(),
// 必须放在 vue 插件后面
vitePluginRequire(),
// vite4、vite5 需要像下面这样写
// vitePluginRequire.default()
],
};
两个选项,这在大多数情况下不是必需的
需要转换的文件,默认配置:/(.jsx?|.tsx?|.vue)$/
vitePluginRequire({ fileRegex:/(.jsx?|.tsx?|.vue)$/ })
转换模式。默认模式为“import”。
"import" 就是寻常的资源导入
"importMetaUrl" see https://vitejs.cn/guide/assets.html#new-url-url-import-meta-url
vitePluginRequire({ translateType: "import" })
translateType: "import"
默认情况下,插件将所有 require
引用路径复制顶部,并使用 import
导入它们。
translateType: "importMetaUrl"
在这种模式下, 插件使用 import.meta.url
去转换 require
。
因此,该模式可以实现按需加载。例如:
let imgUrl = process.env.NODE_ENV !== "development" ? require("../imgs/logo.png") : null;
// some code...
ps: translateType: "importMetaUrl"
在这种模式下,代码不会被删除。
只能满足如下要求: https://github.com/wangzongming/vite-plugin-require/issues/28
注意注意注意:imgUrl 存在才进行渲染 img ,一定需要是这个顺序。而不是在 src 中进行判断,如:src={xx ? require("../imgs/logo.png") : null}
let imgUrl = process.env.NODE_ENV !== "development" ? require("../imgs/logo.png") : null;
return <>
{ imgUrl ? <img src={imgUrl}/> : null }
</>
整个项目目录是根目录。 对于资源你怎么引用并不重要。
假设 src 目录下有 app.jsx 和 imgs 文件夹
// app.jsx
function App() {
// 变量必须放置到最上面
// 并且不可以使用字符串模板
const img2 = "./img/1.png";
const img3_1 = "./img/";
const img3_2 = "./1/";
return (
<div>
<!-- 转换后: "src/imgs/logo.png" -->
<img src={require("./imgs/logo.png")} alt="logo1" />
<!-- 可以使用变量 -->
<img src={require(img2)} alt="logo1" />
<!-- 可以使用字符串拼接 -->
<img src={require(img3_1 + img3_2 + ".png")} alt="logo1" />
</div>
);
}
export default App;
*保证每次的升级都不是破坏性的
https://github.com/wangzongming/vite-plugin-require/blob/master/version-log.md
图片1: src/imgs/logo.png
图片2:src/views/Page1/imgs/logo.png
// src/views/Page1/index.jsx
function Page() {
return (
<div>
<!-- 转换为: "src/imgs/logo.png" -->
<img src={require("../../../imgs/logo.png")} alt="logo1" />
<!-- 转换为: "/src/views/Page1/imgs/logo.png" -->
<img src={require("./imgs/logo.png")} alt="logo1" />
</div>
);
}
export default Page;
vite.config.js
resolve: {
alias: [
{ find: "@imgs", replacement: path.resolve(__dirname, "./src/imgs/") },
],
},
page.jsx
<img src={require("@imgs/logo.png")} alt="" />
import vitePluginRequire from "vite-plugin-require";
export default {
plugins: [
vitePluginRequire.default()
],
};