0.1.4 • Published 2 years ago

vite-plugin-virtual-entry v0.1.4

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

vite-plugin-virtual-entry

vite's MPA needs html file for every entry which makes your project's looks chaotic.

And if you follow vite's MPA, put other file in other directory, unlike index.html, you need useless middle directory(Ex. from vite's MPA doc http://localhost:3000/nested/nested.html) to located it.

This plugin to make vite's MPA in serve and build have same behavior.

This plugin use vite's configureServer Hook to intercept html request and response the html content requested from browser.

This plugin intercept transform and generateBundle hooks of vite:build-html .

Note

  1. please DO NOT use this plugin in lib mode

Features

  • no html file needed
  • webpack entry like
  • auto config build.rollupOptions.input from entry

Usage

    yarn add vite-plugin-virtual-entry --dev
    // or
    npm install vite-plugin-virtual-entry -D

Add it to vite.config.js

// vite.config.js
import virtualEntry from 'vite-plugin-virtual-entry'

//  xxx.html | xxx.js(x) | xxx.ts(x)
type EntryFile = string;
type BaseEntry = EntryFile	| {[EntryName: string]: EntryFile;};
type Entry = BaseEntry | BaseEntry[];
type RenderOption = {
	html: string;
	name: string;
	entry: string;
};
type UserOption = {
    entry?: Entry;
    render?: Render;
    index?: string;
};
//  Case Entry As Object
const entryAsObject: Entry = {
	// http://localhost:3000/page
	// http://localhost:3000/page.html
	page: "/src/index/index.js",
	// http://localhost:3000/nested/page
	// http://localhost:3000/nested/page.html
	"nested/page": "/src/nested/page/index.js",
	// http://localhost:3000/login
	// http://localhost:3000/login.html
	login: "/src/login/login.js",
};

//  Case Entry As Object Array
const entryAsObjectArray: Entry[] = [entryAsObject];

//  Case Entry As String
//  http://localhost:3000/src/login/login
//  http://localhost:3000/src/login/login.html
const entryAsString = "/src/login/login.js";

//  Case Entry As String Array
//  http://localhost:3000/src/login/login
//  http://localhost:3000/src/login/login.html
const entryAsStringArray = ["/src/login/login.js"];
// optional
const render: UserOption['Render'] = ({ html, name, entry }) => {
	/*  You can replace or update HTML in your way.
	  	alternately, by passing `entry`, you can use `ejs` to render your html and return it,eg:
		var ejsHtml =`
			<!DOCTYPE html>
			<html>
			<head></head>
			<body><script type="module" src="<%= entry %>"></script></body>
			</html>
			`
		 return ejs.render(ejsHtml, { entry:entry })
	*/
	return html
};
const entry =
	entryAsObject | entryAsObjectArray | entryAsStringArray | entryAsString;
export default {
	plugins: [virtualEntry({ entry, render }:UserOption)],
};

Index (index.html)

if don't have index.html in your project root, it will render same as 404

404

Plugin will intercept request, if the requested path does not exist , plugin will send something like below to browser

    http://localhost:3000/index
    http://localhost:3000/nested/Page
    http://localhost:3000/login

Further Info

vite-plugin-mpa

vite-plugin-multipage

vite-plugin-html-template

vite-plugin-virtual-html

@rollup/plugin-virtual