Abstruct

Node.js(Typescript)でサーバーサイドアプリを作成する際に、絶対パスでimportするのに躓いたのでまとめておきます。

1. Settings

Typescriptでpath aliasを使うと、絶対パスでimport文が使えて可読性があがるため、以下の設定を入れる。

設定を入れると、以下のように import できるようになる。

  • ライブラリパス
    • src/util/A
  • import方法
    • import {A} from '@/util/A'

1.1. tools

以下のツールが必要。

1
2

npm install --save tsconfig-paths
npm install --save tsc-alias

1.2. tsconfig.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "compilerOptions": {
    ...(略)
    "rootDir": "src",
    "outDir": ".dist",    
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
}

1.3. package.json

1
2
3
4
5
6
7
8
9

  "scripts": {
    // 開発用
    "start:dev": "ts-node --files -r tsconfig-paths/register src/server.ts",
    // 本番用
    "start": "node .dist/server.js",
    "build": "run-s build:clean build:tsc",
    "build:clean": "rimraf .dist",
    "build:tsc": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.json",
  },

1.4. How to run

1
2
3
4
5

# 開発用
yarn start:dev
# 本番用
yarn build
yarn start

2. Appendix

Reactでのフロントエンドアプリの場合は以下の設定でOK.

2.1. tsconfig.json

1
2
3
4
5
6
7

{
  "compilerOptions": {
    "rootDir":"./src",
    "baseUrl": "./"
  },
  "include": ["src/**/*"]
}

2.2. package.json

1
2
3
4
5
6
7

  "scripts": {
    // 開発用
    "start:dev": "react-scripts start",
    // 本番用
    "start": "npx serve -s build",
    "build": "react-scripts build",
  },

3. Reference