node.js - tsconfig の絶対パスが機能しない

okwaves2024-01-25  7

この問題に関する質問をいくつか見ましたが、どれも機能しませんでした Typescript と一緒に Nodejs プロジェクトがあります。相対パスを使用するのは好きではありません。 tsconfig でパスを設定すると、次のエラーが発生します。

モジュール「@app/controllers/main」が見つかりません

// main.ts
export const fullName = "xxxx";
...

// app.ts
import { fullName } from '@app/controllers/main'
...

これが私のプロジェクトの構造です:

-node_modules
-src
----controllers
---------------main.ts
----app.ts
-package.json
-tsconfig.json

tsconfig:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "strict": true,
        "baseUrl": ".",
        "paths": {
            "@app/*": ["src/*"]
        },
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
    }
}

私の問題はどこにあるのでしょうか?

よろしくお願いします。

エラーをどのように受け取りましたか?コードをビルドしたとき、または TSC コンパイラが IDE に表示されましたか?

– tmhao2005

2020 年 9 月 4 日 16:36

次のコマンドでプロジェクトを実行したい場合: ts-node-dev src/index.ts

– ミナ・モハマディ

2020 年 9 月 4 日 16:37

代わりに純粋な tsc を使用しない理由はありますか?

– tmhao2005

2020 年 9 月 4 日 16:48



------------------------

2023 年のアップデート 開発依存関係をインストールする
npm install --save-dev \
  ts-patch \
  typescript-transform-paths \ 
  tsconfig-paths

ts-パッチ typescript インストールに直接パッチを適用して、カスタム トランスフォーマー (プラグイン) を許可します。 私が ttypescript よりも ts-patch を好む主な違いは、tsc にはパッチが適用される (そのため名前が付けられている) ため、コンパイラー (ttsc) を変更する必要がないことです。

typescript-transform-paths tsconfig.json 内のパスからの絶対インポートを相対インポートに変換します。

tsconfig-paths tsconfig.json の paths セクションで場所が指定されているモジュールを読み込みます。実行時の読み込みと API 経由の読み込みの両方がサポートされています。

tsconfig.jsonを更新する

注: パスとプラグインを参照してください

{
   "compilerOptions":{
      /* A series of entries which re-map imports to lookup locations relative to the baseUrl */
      "paths":{
         "~/*":[
            "./src/*"
         ]
      },
      /* List of language service plugins */
      "plugins":[
         /* Transform paths in output .js files */
         {
            "transform":"typescript-transform-paths"
         },
         /* Transform paths in output .d.ts files */
         {
            "transform":"typescript-transform-paths",
            "afterDeclarations": true
         }
      ]
   }
}
パッチタイプスクリプト

注: これは永続的なものではありません

npx ts-patch install
package.json の準備スクリプトを編集/追加して Typescript に永続的にパッチを適用する

注: これは永続的です

{
  // ...
  "scripts": {
    "prepare": "npx ts-patch install -s"
  }
}
インポートでの使用法
import { hello } from '~/world';
いつものようにコンパイルします
npx tsc
古い答え

残念ながら (理由はわかりませんが)、Typescript コンパイラーは現在、パス変換を十分にサポートしていません。

これが私の解決策です:

私はこのプロジェクトでこのソリューションを使用しました。

devDependency をインストールする ttypescript -> npm install ttypescript --save-dev -> TTypescript (Transformer TypeScript) は、tsconfig.json のトランスフォーマーを使用するようにコンパイル モジュールをオンザフライでパッチすることで問題を解決します。 typescript-transform-paths -> npm install typescript-transform-paths --save-dev ->絶対インポートをパスからの相対に変換します。tsconfig.json。 tsconfig-paths -> npm install tsconfig-paths --save-dev ->これを使用して、tsconfig.json の paths セクションで場所が指定されているモジュールをロードします。実行時の読み込みと API 経由の読み込みの両方がサポートされています。 ts-node-dev -> npm install ts-node-dev --save-dev ->必要なファイルのいずれかが変更されると(標準のノード開発として)ターゲット ノード プロセスを再起動しますが、再起動間で Typescript コンパイル プロセスを共有します。 tsconfig.json

次のオプションを使用して tsconfig.json ファイルを更新します。

{
    "compilerOptions": {
        /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
        "paths": {
            "@app/*": [
                "./src/*"
            ]
        },
        /* Advanced Options */
        "plugins": [
            {
                "transform": "typescript-transform-paths"
            }
        ],
    }
}
建てる

コンパイル段階では、設定ファイルで tsc の代わりに ttsc を使用します。以下のスニペットを参照してください。

npx ttsc --p ./tsconfig.json
自動リロードを備えた開発モード

開発モードの場合は、次のスクリプトを使用して (package.json のスクリプト オプションに入れます)、自動的にリロードします。プロジェクトに正しいパスが設定されていることを確認します。 src/app.ts は「エントリ ポイント」です。 src フォルダーの下にあるアプリケーションのファイル。

npx ts-node-dev --prefer-ts true --no-notify -r tsconfig-paths/register --watch src --transpileOnly src/app.ts

追記: ts-node-dev を使用すると速度が大幅に向上します。

6

その理由は、パスが出力内のモジュール指定子を変換することを意図していないためです。むしろ、型チェックの目的で他のツールによって言語に対して実行されるような変換を記述することを目的としています。パスのポスター子のユースケースには、RequireJS config.paths、SystemJS config.{packages|paths が含まれます。|map}、および Webpack module.resolve.{alias|modules}。さらに、TypeScript はさまざまな理由から、出力内のモジュール指定子の書き換えを回避します。

– アルアン・ハダッド

2020 年 9 月 4 日 17:45

compilerOptions + プラグインがついに到着しました ??!!!!!!私たちはそれをどれだけ待ちましたか。いいね。素晴らしい答えですが、絶対パスが必要になる場合があるための簡単な解決策があればいいのですが ;)

– シティキッド

2 年 5 月 16 日023 17:20

node dist/app.js でコードを実行しようとすると、次のエラーが発生します: エラー: モジュールが見つかりません

– ニキル・ワーグ

2023 年 12 月 6 日 13:25

@NikhilWagh より詳しい情報を追加していただけますか。ありがとう

– カルロ・コッラディーニ

2023 年 12 月 6 日 16:09

コンパイルされた JavaScript で絶対インポート ステートメントが相対インポート ステートメントに適切に変換されないため、アプリで作成したモジュールに対して「モジュールが見つかりません」というメッセージが表示されます。

– ニキル・ワーグ

2023 年 12 月 9 日 15:36



------------------------

@Carlo Corradini の回答を少し調整してみます。 この問題を解決するための私のアプローチは次のとおりです。

必要なプラグインをインストールします。 npm i -D ttypescript typescript-transform-paths ts-node tsconfig-paths。これらはパスの変換に役立つパッケージです。 ttypescript-> https://www.npmjs.com/package/ttypescript

それでは、tsconfig.json に次のように記述します。

{

 "ts-node": {
   "transpileOnly": true,
   "require": [  // set this so you dont need to use ts-node -r 
     "typescript-transform-paths/register",
     "tsconfig-paths/register"
    ]
 },         
 "compilerOptions": {
    "composite": true,
    "rootDir": ".", // must define
    "baseUrl": "src", // must define, the paths will relative to this
    "outDir": "lib", 
    "skipLibCheck": false,
    "paths": {
     "@app/*": ["./*"],
     "@controllers/*": ["./controllers/*"],
    },
     "plugins": [
       { "transform": "typescript-transform-paths" }
     ]
 }
}

その後、コードで以下を使用できます。

import myControllers from "@controllers/main.ts"

これで、npx ttsc -p tsconfig.json をコンパイルできるようになりました

ts-node で実行するには、npx ts-node -p tsconfig.json src/app.ts を使用します



------------------------

構文は正しいです。

この記事の執筆時点では、ts-node-dev は tsconfig.json のパス エントリをサポートしていないようです。

この github の問題では、この問題について説明し、回避策のオプションが示されています。



------------------------

更新内容(2023年3月現在)

前の回答は開発には役立ちましたが、実稼働環境でビルド ファイルを実行すると依然として問題が発生しました。

私がこの問題を完全に解決した方法は、ビルドで tsc-alias パッケージを使用し、開発で tsconfig-paths を使用することです。

セットアップ手順: tsc-alias をインストールし、 tsconfig-paths を開発依存関係として次のように指定します。
npm i -D tsc-alias tsconfig-paths
開発環境で tsconfig-paths を使用するか、次のようにスクリプトを開始します。
{
  "scripts": {
    "dev": "ts-node-dev -r tsconfig-paths/register src/index.ts", // here I am using ts-node-dev
    "start": "ts-node -r tsconfig-paths/register src/index.ts" // works with node too, see tsconfig-paths doc
  },
  "devDependencies": {
    "tsconfig-paths": "^4.1.2",
    "typescript": "^4.9.5"
  }
}
ビルド スクリプトに tsc-alias を追加します。 package.json 内:
{
  "scripts": {
    "build": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json"
  },
  "devDependencies": {
    "tsc-alias": "^1.8.3",
    "typescript": "^4.9.5"
  }
}

それで終わりです。これで完了です。パス エイリアスと絶対インポートの両方を使用して、モジュールが見つからない問題が発生することなくアプリを構築できるようになりました。

参考までに、私の tsconfig.json を示します。

{
  "compilerOptions": {
    "module": "commonjs",
    "baseUrl": "src", // notice my base url is set to ./src folder
    "resolveJsonModule": true,
    "outDir": "./build",
    "paths": {
      "@middlewares": ["_globals/middlewares"], // referring to ./src/_globals/middlewares folder 
      "@exceptions": ["_globals/exceptions"],
      "@utils": ["_globals/utils"]
    }
  },
  "include": [ "src/**/*" ], // if you need absolute path or path alias outside src then include the directory accordingly
  "exclude": ["src/test.ts"] // import won't work in this file/directory
}
使用法

絶対インポートとパス エイリアスの両方を使用できるようになりました。

import { sth } from "_globals/sth"; // using absolute imports
import { sth } from "@utils"; // using path alias

ビルド ファイルは、モジュールが見つからないというエラーも発生せずに実行されるはずです。

1

これが答えになるはずです。

– ニキル・ワーグ

2023 年 12 月 6 日 13:40

総合生活情報サイト - OKWAVES
総合生活情報サイト - OKWAVES
生活総合情報サイトokwaves(オールアバウト)。その道のプロ(専門家)が、日常生活をより豊かに快適にするノウハウから業界の最新動向、読み物コラムまで、多彩なコンテンツを発信。