0.1.3 • Published 1 year ago
vitejs-plugins v0.1.3
Vitejs-plugins
easy to use vitejs plugins
- 👌 VitePluginAsyncCatch: add
try {} catch (e) {}
exception capture for async function - ⛺️ VitePluginRouters: dynamically generate page routing files based on directory structure
- 📦 VitePluginStyleImport: styles that reference component libraries on demand
- 📺 VitePluginFullReload: automatically reload the page when some specific files are modified
Install
yarn add vitejs-plugins
Usage
VitePluginAsyncCatch
It is defined globally in advance to handle the error information returned by the multi-layer asyncAwait function
/**
* @filePath
* @functionName
* @start The number of characters
* @err reject error info
**/
window.handleAsyncAwaitError = function (filePath, functionName, start, err) {
console.info(filePath, functionName, start, err)
}
Reconfigure the vitejs plugin
import { VitePluginAsyncCatch } from 'vitejs-plugins'
export default {
//..
plugins: [
VitePluginAsyncCatch({
includes: ['.tsx', '.ts', '.js', '.jsx'], // default file suffix
ignores: [], // Some files to be ignore
})
]
}
VitePluginRouters
dynamically generate page routing files based on directory structure
import { VitePluginRouters } from 'vitejs-plugins'
export default {
//..
plugins: [
VitePluginRouters({
watch: true, // set true when development environment
pages: join(process.cwd(), './src/pages'), // Pages Folder
ignore: ['com', 'components', 'utils'], // Folders ignored
routerPath: join(process.cwd(), './src/router/config.ts') // routing file path
})
]
}
Generated route configuration example, You can manually set the title in the configuration file, which will not be overwritten by subsequent synchronization. Or set it in the form of page note/* @ title xxx /
export default [
{
path: '/finance/account/detail',
component: () => import('@/pages/finance/account/detail'),
resCode: 'finance_account_detail',
title: '--',
},
]
VitePluginStyleImport
styles that reference component libraries on demand. For example, reference the style of the ant d component library on demand
import { VitePluginStyleImport } from 'vitejs-plugins'
export default {
//..
plugins: [
VitePluginStyleImport({
name: 'antd', // component library name
createImport: createImport, // custom Insert Import Content
}),
]
}
function createImport(component_: string) { // get every component name
const component = component_.replace(/([A-Z])/g, '-$1').toLowerCase()
const jsStylePath = `node_modules/antd/es/${component}/style/css.js`
if (fs.existsSync(join(CWD, jsStylePath))) {
return `import "antd/es/${component}/style/index.js"`
} else {
return ''
}
}
VitePluginFullReload
automatically reload the page when some specific files are modified.
import { VitePluginFullReload } from 'vitejs-plugins'
export default {
//..
plugins: [
VitePluginFullReload(['config/xxx.config.ts']),
]
}
the second parameter type is as follows
Option | Description | Type | Default |
---|---|---|---|
delay | delay time | number | 0 |
log | log after reload | boolean | true |
root | Files will be resolved against this path | string | process.cwd() |