Help us understand the problem. What is going on with this article?

Nuxt.js+Express.jsにTypeScriptを導入してみた

Nuxt.jsがTypeScriptのサポートを開始!

これは導入しないてはないと思い、導入を決意

ソース

主な環境

  • Nuxt.js v2.8.1
  • @nuxt/typescript v2.8.1
  • Express.js v4.17.1
  • ts-node v8.2.0
  • nodemon v1.19.1

通常どおり

コマンドラインでプロジェクトの立上げ

yarn create nuxt-app nuxt-express-ts

expressを選択してインストールをします。

TypeScriptの導入

Nuxt Typescript サポート

こちらの通り、下記をインストールしていきます。

yarn add -D @nuxt/typescript
yarn add ts-node

package.jsonも最新に修正していきます。

この時に起動スクリプトもtsに指定してあげます。

package.json
{
  "name": "nuxt-express-ts",
  "version": "1.0.0",
  "description": "My pioneering Nuxt.js project",
  "author": "sauzar18",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "yarn run lint",
    "dev": "cross-env NODE_ENV=development nodemon server/index.ts --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.ts",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.5.4",
    "@nuxtjs/pwa": "^2.6.0",
    "cross-env": "^5.2.0",
    "express": "^4.17.1",
    "nuxt": "^2.8.1",
    "ts-node": "^8.2.0"
  },
  "devDependencies": {
    "@nuxt/typescript": "^2.8.1",
    "@nuxtjs/eslint-config": "^0.0.1",
    "@nuxtjs/eslint-module": "^0.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-config-standard": ">=12.0.0",
    "eslint-plugin-import": ">=2.17.3",
    "eslint-plugin-jest": ">=22.6.4",
    "eslint-plugin-node": ">=9.1.0",
    "eslint-plugin-nuxt": ">=0.4.3",
    "eslint-plugin-promise": ">=4.1.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-plugin-vue": "^5.2.2",
    "nodemon": "^1.19.1"
  }
}

設定ファイル(nuxt.config)を編集

まずはnuxt.config.jsからnuxt.config.tsへ変更

nuxt.config.ts
import NuxtConfiguration from '@nuxt/config'

const config: NuxtConfiguration = {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/eslint-module',
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}
export default config

こちらに書き換えます。

その後tsconfig.jsonの空ファイルをルートディレクトリに作成

下記を実行するとtsconfig.jsonが自動的に設定される

yarn nuxt

このコマンドはtsconfigが生成されたら、起動をとめていいです。

起動ファイルのts化

server/index.jsからserver/index.tsへ変更します。

その後importに書き換えをしてあげます。

server/index.ts
import express from 'express'
import consola from 'consola'
import { Nuxt, Builder } from 'nuxt'
const app = express()

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

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

  const { host, port } = nuxt.options.server

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

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

起動ファイルを書き換えたら、ES6以降を使用するために、tsconfig.jsonを修正します。

moduleをコメントアウトにします。

tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    // "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ]
  }
}

これで準備ができました。

yarn run dev

起動すると、tsとExpressがうまく動いてくれるはずです。

以前はbackpack.jsを利用していたのですが、nuxt.config.tsがうまく読み込まれない問題がありました。

これに関しては解決方法が見つからなかったので、知っている人いたら教えてください。

解決できました。
下記記事でbackpackの設定方法を記載しております。
Nuxt.js+Express.jsにTypeScriptを導入してみた(backpack.js編)

まとめ

NuxtのTypeScriptのサポートがはじまり、書き換えをし始めてExpressとの連携部分に苦戦したので、今回解決方法が見つけられて良かったです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした