常用工具

一些我常用且极力推荐的工具

tsx

直接执行 .ts 文件，本地写 demo 的时候很好用

$ npm i -g tsx
$ tsx index.ts  # execute typescript file directly
$ tsx --watch index.ts  # watch mode

vite-node

正如名字所描述，这是一个类似 node 命令，可以执行 JavaScript 文件，但是又拥有 vite 的转换能力的工具

例如下面的是一个输出 Vue SSR 模式下的 HTML 的例子：

main.ts

// this runs in Node.js on the server.
import { createSSRApp } from 'vue'
// Vue's server-rendering API is exposed under `vue/server-renderer`.
import { renderToString } from 'vue/server-renderer'
import App from './App.vue' // 利用 vite 的转换能力解析 .vue 文件

const app = createSSRApp(App)

renderToString(app).then((html) => {
  console.log(html)
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

App.vue

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

$ npm i -g vite-node
$ node main.ts
`<div data-v-3094d2c4><a href="https://vitejs.dev" target="_blank" data-v-3094d2c4><img src="/vite.svg" class="logo" alt="Vite logo" data-v-3094d2c4></a><a href="https://vuejs.org/" target="_blank" data-v-3094d2c4><img src="/@fs/Users/peterroe/Desktop/vscode/i/ssr-vue/src/assets/vue.svg" class="logo vue" alt="Vue logo" data-v-3094d2c4></a></div>`