Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.npmjs.com/package/vite-plugin-require below:

vite-plugin-require - npm

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

• √ 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: https://github.com/wangzongming/vite-plugin-require/issues/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()
	],
};

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4