Nuxt.js+Express.jsにTypeScriptを導入してみた(backpack.js編)

以前下記記事でTypeScriptに対応したNuxt.js+Express.jsを公開したが、サーバーにアップロードするためには不十分なので、追加で記事を作成

Nuxt.js+Express.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
• backpack-core v0.8.4
• awesome-typescript-loader v5.2.1

backpack.jsを使ってts化されたファイルをコンパイル

まずはbackpackとawesome-typescript-loaderを追加する

yarn add backpack-core awesome-typescript-loader

ts-loaderだとダメでした。

backpackの設定

config.entry.mainで起動スクリプトのパスを設定
loaderを先ほどinstallしたawesome-typescript-loaderに設定

backpack.config.js

module.exports = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  webpack: (config, options, webpack) => {
    config.entry.main = './server/index.ts'
    config.resolve = {
      extensions: ['.ts', '.js', '.json']
    }
    config.module.rules.push({
      test: /\.ts$/,
      loader: 'awesome-typescript-loader'
    })
    return config
  }
}

package.jsonの設定

起動時の設定をする

package.json

"scripts": {
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
    "precommit": "yarn run lint",
    "dev": "backpack dev",
    "build": "nuxt build && backpack build",
    "start": "cross-env NODE_ENV=production node build/main.js",
    "generate": "nuxt generate"
},

tsconfig.jsonの設定

これは以前コメントアウトしたものを戻す

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"
    ]
  }
}

これにて設定完了

起動

localで起動する場合はそのまま

yarn run dev

buildするときも

yarn run build

でnode.jsで動くようにコンパイルしてくれます。

build/main.jsが起動ファイルになります。

まとめ

loaderの相性もあることを知りました。