Gathering detailed insights and metrics for vite-plugin-filesystem-multi-pages
Gathering detailed insights and metrics for vite-plugin-filesystem-multi-pages
Installations
npm install vite-plugin-filesystem-multi-pagesDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.15.0
NPM Version
8.11.0
Score
73
Supply Chain
98.5
Quality
75.7
Maintenance
100
Vulnerability
100
License
Languages
4
TypeScript
JavaScript
HTML
CSS
TypeScript (82.79%)
JavaScript (8.13%)
HTML (7.71%)
CSS (1.38%)
Developer
MinatoHikari
Download Statistics
Total Downloads
2,457
Last Day
1
Last Week
5
Last Month
35
Last Year
398
GitHub Statistics
MIT License
11 Stars
20 Commits
1 Forks
1 Watchers
1 Branches
1 Contributors
Updated on Aug 06, 2024
Bundle Size
5.20 kB
Minified
1.94 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.3.4
Package Id
vite-plugin-filesystem-multi-pages@0.3.4
Unpacked Size
47.82 kB
Size
14.41 kB
File Count
34
NPM Version
8.11.0
Node Version
16.15.0
Total Downloads
Cumulative downloads
Total Downloads
2,457
Last Day
0%
1
Compared to previous day
Last Week
0%
5
Compared to previous week
Last Month
-31.4%
35
Compared to previous month
Last Year
76.1%
398
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
5
vite-plugin-filesystem-multi-pages
filesystem routes for mpa
- Automatically set redirect rules for development. No more need to visit
https://localhost/src/pages/nested/nested/index.html. Just visithttp://localhost/nested/nestedas you do in SPA project. - Out of box MPA auto settings when building. No need to set rollup build input options.
- All-in-one template mode support. All pages can use one template with few settings.
English | 简体中文
Install
npm i -D vite-plugin-filesystem-multi-pages
or use yarn/pnpm
Usage
1import fmp from 'vite-plugin-filesystem-multi-pages'; 2 3export default defineConfig({ 4 plugins: [fmp()], 5});
Options
1// the directory to scan, valid routes will be 2// reflected to browser location. 3// default: 'src/pages' 4dir: Pathlike 5// the entry html name of each page. 6// default: 'index.html' 7templateName: string 8// if publicTemplateSrc !== '', all-in-one template mode will be used 9publicTemplateSrc: string 10// only works in all-in-one template mode 11// define which file to scan, if the file be detected, the folder will be added into routes 12// default: main.ts 13scanFileName: string 14// only works in all-in-one template mode 15// define variables which will replace the {{ xxx }} things in the public template 16replace: Record<string, string | ((filePath:string) => string)> 17// Normally, vite will place dist files in something like /dist/src/pages/... 18// If you want to put them at other dir, you can set this option. 19publicPath: string
As an example, if you have a directory named src/pages:
- src/pages
- index.html
- nested
- index.html
- foo
- index.html
- bar
- index.html
Available routes are ['', '/nested', '/nested/foo', '/bar'].
You can use window.location.href to change the route.
All-in-one template mode
If you have a directory named src/pages:
- index.html (public template)
- src/pages
- main.ts
- nested
- main.ts
- foo
- main.ts
- bar
- main.ts
Set publicTemplateSrc to 'path.resolve(__dirname, 'index.html')'.
Set scanFileName to main.ts
In index.html, you can use {{ xxx }} to set the variables which will be replaced by replace.
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>{{title}}</title> 8 </head> 9 <body> 10 <div id="app"></div> 11 <script type="module" src="{{src}}/main.ts"></script> 12 </body> 13</html>
Set replace:
1replace: { 2 title: 'My title', 3 src: (path) => path 4}
No vulnerabilities found.
No security vulnerabilities found.