nuxt.js - Hur man specificerar skrivet på TypeScript-serverns ingångspunkt i ett "Nuxt TypeScript"-projekt?


I det exempel på ett JavaScript-baserat Nuxt-projekt som jag har sett, ligger server-entrén i server/index.js. Här är dess standardkod (för Express.js-ramverkets fall):

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()

För att starta serverskriptet med standard Nuxt-byggning har uppgiften som kallas dev-skript ändrats till:

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

Nu: vad måste vi göra om vi vill skriva server/index i TypeScript (i ett Nuxt TypeScript-projekt)? Definitivt, att bara byta namn på server/index.js till server/index.ts räcker inte, eftersom Nuxt måste veta att vi skriver källkoden i server/index.ts och måste kompilera den.

Nuxt tar bort Webpack-konfigurationen från oss med orden "Jag tar hand om Webpack-konfigurationen, du bör definiera inställningarna i nuxt.config.js". Men hur får vi Nuxt att kompilera server.ts nu?

Ännu mer specifikt

Anta att vi har index.ts i server-undermappen med innehållet console.log("ok!). Hur ska vi:

  1. kompilera det till JavaScript,
  2. starta servern och få ok! återkopplingsutdata i terminalen?

Det är enkelt med Webpack men i det här fallet är det ett TypeScript Nuxt-projekt där direkt konfigurering av Webpack inte är tillgänglig.

Svar #1

Nuxt.js har officiellt TypeScript-stöd som kan hittas här:

Förutsatt att du redan har en tsconfig.json för ditt projekt, är detta vad du har kvar:

  1. Lägg till @nuxt/typescript-build som en devDependency
  2. Lägg till den här raden i din nuxt.config.js
buildModules: ['@nuxt/typescript-build']