nuxt.js - Hvordan spesifisere skrevet på TypeScript server-side inngangspunkt i et «Nuxt TypeScript»-prosjekt?


I eksempelet på et JavaScript-basert Nuxt-prosjekt som jeg har sett, er serverinngangen i server/index.js. Her er dens standardkode (for Express.js-rammeverktilfellet):

const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  const {
    host = process.env.HOST || '127.0.0.1',
    port = process.env.PORT || 3000
  } = nuxt.options.server

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()

For å starte server-skriptet med standard Nuxt-bygging, har oppgaven kalt dev-skriptet blitt endret til:

"cross-env NODE_ENV=development nodemon server/index.js --watch server",

Nå: hva må vi gjøre hvis vi vil skrive server/index i TypeScript (i et Nuxt TypeScript-prosjekt)? Definitivt vil det ikke være nok å bare gi nytt navn til server/index.js til server/index.ts, fordi Nuxt må vite at vi skriver kildekoden i server/index.ts og må kompilere den.

Nuxt tar bort Webpack-konfigurasjonen fra oss med ordene «Jeg tar meg av Webpack-konfigurasjonen, du bør definere innstillingene i nuxt.config.js». Men hvordan får vi Nuxt til å kompilere server.ts nå?

Enda mer spesifikt

Anta at vi har index.ts i server-undermappen med innholdet console.log("ok!). Hvordan bør vi:

  1. kompilere det til JavaScript,
  2. start serveren og få ok! tilbakemelding i terminalen?

Det er enkelt med Webpack, men i dette tilfellet er det et TypeScript Nuxt-prosjekt hvor direkte konfigurasjon av Webpack ikke er tilgjengelig.

Svar #1

Nuxt.js har offisiell TypeScript-støtte som kan finnes her:

Forutsatt at du allerede har en tsconfig.json for prosjektet ditt, er dette det som gjenstår:

  1. Legg til @nuxt/typescript-build som en devDependency
  2. Legg til denne linjen i din nuxt.config.js
buildModules: ['@nuxt/typescript-build']