@amaster.ai/vite-plugins
v1.1.35
Published
Collection of Vite plugins for React applications
Readme
@amaster.ai/vite-plugins
Vite plugins collection for Amaster.ai projects, including Taro development tools.
Installation
pnpm add @amaster.ai/vite-pluginsPlugins
1. taroStyleAdapterPlugin
Automatically injects Taro page style adaptations in development mode to hide scrollbars while maintaining scroll functionality.
Features:
- Direct style injection into HTML (no postMessage needed)
- Only active in development mode (
serve) - Hides Taro page container scrollbar while maintaining scroll functionality
- Automatically included in
devTools()- no separate import needed
Usage:
Already included when you use devTools():
import devTools from '@amaster.ai/vite-plugins'
export default {
compiler: {
type: 'vite',
vitePlugins: [
...devTools() // ✅ taroStyleAdapterPlugin is already included
]
}
}Or use it standalone if needed:
import { taroStyleAdapterPlugin } from '@amaster.ai/vite-plugins'
export default {
compiler: {
type: 'vite',
vitePlugins: [
taroStyleAdapterPlugin()
]
}
}How it works:
The plugin uses Vite's transformIndexHtml hook to inject styles directly into the HTML <head>:
<style data-taro-adapter="true">
/* 隐藏 Taro 页面容器滚动条 */
.taro_page {
-ms-overflow-style: none;
scrollbar-width: none;
}
.taro_page::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
/* 隐藏 Taro ScrollView 组件滚动条 */
.taro-scroll-view__scroll-y,
.taro-scroll-view__scroll-x {
-ms-overflow-style: none;
scrollbar-width: none;
}
.taro-scroll-view__scroll-y::-webkit-scrollbar,
.taro-scroll-view__scroll-x::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
</style>This approach is simpler and more reliable than message-based communication.
2. injectTaroEnv / injectAmasterEnv
Environment variable injection helpers for Taro's defineConstants.
Usage:
import { injectAmasterEnv, injectTaroEnv } from '@amaster.ai/vite-plugins'
export default defineConfig({
defineConstants: {
...injectAmasterEnv(),
// or
...injectTaroEnv({
additional: ['CUSTOM_VAR'],
autoInjectTaroApp: true,
autoInjectVite: true
})
}
})3. componentIdPlugin
Adds unique IDs to components for development tools tracking.
4. editorBridgePlugin
Enables communication bridge between Taro app and editor.
5. routesExposePlugin
Exposes route information for editor integration.
6. browserLogsPlugin
Captures and forwards browser console logs (auto-enabled in sandbox environment).
Development Tools Collection
Use devTools() to quickly enable all development plugins:
import devTools from '@amaster.ai/vite-plugins'
export default defineConfig({
compiler: {
type: 'vite',
vitePlugins: [
...devTools(),
// ... other plugins
]
}
})This includes:
- taroStyleAdapterPlugin - Taro H5 scrollbar hiding
- componentIdPlugin - Component ID tracking
- editorBridgePlugin - Editor communication
- routesExposePlugin - Route information exposure
- browserLogsPlugin - Browser console forwarding (when in sandbox)
License
MIT