can let vite projects to support
require
vite-plugin-require
Install and use to achieve painless support require("xxx")
If the project is useful to you, please click on star!
硬件接入AI最简单、最低成本的方案: https://github.com/wangzongming/esp-ai
QQ 交流群: 854445223
- √ vite2
- √ vite3
- √ vite4
- √ vite5
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(),
// Must be placed after the vue plugin
vitePluginRequire(),
// vite4、vite5
// vitePluginRequire.default()
],
};
Two options,which is not required in most cases
File to be converted, default configuration: /(.jsx? |.tsx? |.vue)$/
vitePluginRequire({ fileRegex:/(.jsx?|.tsx?|.vue)$/ })
Conversion mode. The default mode is "import"
"import" is resource introductio
"importMetaUrl" see https://vitejs.cn/guide/assets.html#new-url-url-import-meta-url
vitePluginRequire({ translateType: "import" })
translateType: "import"
By default, plug-ins place all require
references at the top and import them using import.
translateType: "importMetaUrl"
In this mode, the plugin uses import.meta.url
instead ofrequire
Therefore, on-demand loading can be implemented in this mode. eg:
let imgUrl = process.env.NODE_ENV !== "development" ? require("../imgs/logo.png") : null;
// some code...
ps: translateType: "importMetaUrl"
Code is not deleted in mode。
Only the following requirements can be implemented.
detail see: #28
let imgUrl = process.env.NODE_ENV !== "development" ? require("../imgs/logo.png") : null;
return <>
{ imgUrl ? <img src={imgUrl}/> : null }
</>
The entire project directory is the root directory。 It doesn't matter how you quote it.
Suppose there are app.jsx and imgs folders in the src directory
// app.jsx
function App() {
// The variable must be placed on the top 变量必须放置到最上面
// Do not use string templates 不可以使用字符串模板
const img2 = "./img/1.png";
const img3_1 = "./img/";
const img3_2 = "./1/";
return (
<div>
<!-- Will actually convert to: "src/imgs/logo.png" -->
<img src={require("./imgs/logo.png")} alt="logo1" />
<!-- You can use variables -->
<img src={require(img2)} alt="logo1" />
<!-- You can use String splicing -->
<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
img1: src/imgs/logo.png
img2:src/views/Page1/imgs/logo.png
// src/views/Page1/index.jsx
function Page() {
return (
<div>
<!-- Will actually convert to: "src/imgs/logo.png" -->
<img src={require("../../../imgs/logo.png")} alt="logo1" />
<!-- Will actually convert to: "/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()
],
};