vite-plugin-require  

> 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!



---
- 中文文档
- English
---

微信交流群 | Wechat communication group

Adaptive

- √ vite2
- √ vite3
- √ vite4
- √ vite5

---

Install

``
npm i vite-plugin-require | yarn add vite-plugin-require
`


---

Usage

`js
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()
],
};
`
---

options

Two options，which is not required in most cases

#### fileRegex

File to be converted, default configuration: /(.jsx? |.tsx? |.vue)$/

` js
vitePluginRequire({ fileRegex:/(.jsx?|.tsx?|.vue)$/ })
`


#### translateType

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

` js
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: https://github.com/wangzongming/vite-plugin-require/issues/28
`
let imgUrl = process.env.NODE_ENV !== "development" ? require("../imgs/logo.png") : null;

return <>
{ imgUrl ? : null }


`

Where is the root directory？

The entire project directory is the root directory。
It doesn't matter how you quote it.

---

Demo

Suppose there are app.jsx and imgs folders in the src directory

`jsx
// 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 (

);
}
export default App;
`
---

Upgrade log

https://github.com/wangzongming/vite-plugin-require/blob/master/version-log.md

---

Other deeper subdirectories

img1： src/imgs/logo.png

img2：src/views/Page1/imgs/logo.png


`jsx
// src/views/Page1/index.jsx
function Page() {
return (

);
}
export default Page;
`
---

Alias

vite.config.js

`
resolve: {
alias: [
{ find: "@imgs", replacement: path.resolve(__dirname, "./src/imgs/") },
],
},
`

page.jsx

`

`
---

FAQ

$3

`js
import vitePluginRequire from "vite-plugin-require";

export default {
plugins: [
vitePluginRequire.default()
],
};
``