vite-plugin-terminal
v1.2.0
Published
Log in the node terminal from the browser
Downloads
7,666
Readme
vite-plugin-terminal
Log in the node terminal from the browser
Open a playground online in StackBlitz
Install
npm i -D vite-plugin-terminal
Add plugin to your vite.config.ts
:
// vite.config.ts
import Terminal from 'vite-plugin-terminal'
export default {
plugins: [
Terminal()
]
}
Usage
In your source code import terminal
, and use it like you do with console.log
.
import { terminal } from 'virtual:terminal'
terminal.log('Hey terminal! A message from the browser')
The terminal log calls will be removed when building the app.
Types
There are two ways of telling typescript about the types of the virtual import:
In your
global.d.ts
file add the following line:/// <reference types="vite-plugin-terminal/client" />
In your
tsconfig.json
add the following to yourcompilerOptions.types
array:{ // ... "compilerOptions": { // ... "types": [ "vite-plugin-terminal/client" ], }, }
API
Supported methods:
terminal.log(obj1 [, obj2, ..., objN])
terminal.info(obj1 [, obj2, ..., objN])
terminal.warn(obj1 [, obj2, ..., objN])
terminal.error(obj1 [, obj2, ..., objN])
terminal.assert(assertion, obj1 [, obj2, ..., objN])
terminal.group()
terminal.groupCollapsed()
terminal.groupEnd()
terminal.table(obj)
terminal.time(id)
terminal.timeLog(id, obj1 [, obj2, ..., objN])
terminal.timeEnd(id)
terminal.clear()
terminal.count(label)
terminal.countReset(label)
terminal.dir(obj)
terminal.dirxml(obj)
These methods will work but use the console
terminal.trace(...args: any[])
terminal.profile(...args: any[])
terminal.profileEnd(...args: any[])
Redirect console
logs to the terminal
If you want the standard console
logs to appear in the terminal, you can use the console: 'terminal'
option in your vite.config.ts
:
// vite.config.ts
import Terminal from 'vite-plugin-terminal'
export default {
plugins: [
Terminal({
console: 'terminal'
})
]
}
In this case, you don't need to import the virtual terminal to use the plugin.
console.log('Hey terminal! A message from the browser')
You can also overwrite it in your index.html
head manually in case you would like more control.
<script type="module">
// Redirect console logs to the terminal
import terminal from 'virtual:terminal'
globalThis.console = terminal
</script>
Check the Console playground for a full example.
Log in both the terminal and the console
You can use the output
option to define where the terminal
logs should be logged. Accepts terminal
, console
, or an array with both.
// vite.config.ts
import Terminal from 'vite-plugin-terminal'
export default {
plugins: [
Terminal({
output: ['terminal', 'console']
})
]
}
Examples
- Basic - Playground using every available method.
- Console - Redirect standard console logs to the terminal.
- Auto Import - Use unplugin-auto-import to make
terminal
global in your app. - Vue - Example of logging to the terminal from a Vue App.
Options
console
Type: 'terminal' | undefined
Default: undefined
Set to 'terminal'
to make globalThis.console
equal to the terminal
object in your app.
output
Type: 'terminal' | 'console' | ['terminal', 'console']
Default: terminal
Define where the output for the logs.
strip
Type: boolean
Default: true
Strip terminal.*()
when bundling for production.
include
Type: String | RegExp | Array[...String|RegExp]
Default: /.+\.(js|ts|mjs|cjs|mts|cts)/
Example: include: '**/*.(mjs|js)',
A pattern, or array of patterns, which specify the files in the build the plugin should operate on when removing calls for production.
exclude
Type: String | RegExp | Array[...String|RegExp]
Default: []
Example: exlude: 'tests/**/*',
A pattern, or array of patterns, which specify the files in the build the plugin should ignore when removing calls for production.
Credits
- Original idea from Domenic Elm
- Project setup from @antfu's vite-plugin-inspect
- Bundling by unbuild
- Strip functions during build uses rollup-plugin-strip
Sponsors
License
MIT License © 2022-present Matias Capeletto