☰

Typescript コンパイル中に相対インポート ステートメントに .js 拡張子を追加する (ES6 モジュール) 質問する

tag-icon • tag-icon javascript node.js typescript npm node-modules
Typescript コンパイル中に相対インポート ステートメントに .js 拡張子を追加する (ES6 モジュール) 質問する

これは些細な問題のように思えますが、この問題を解決するためにどのような設定/構成を使用する必要があるかは明らかではありません。

Hello World プログラムのディレクトリ構造とソース コードは次のとおりです。

ディレクトリ構造:

| -- HelloWorldProgram
     | -- HelloWorld.ts
     | -- index.ts
     | -- package.json
     | -- tsconfig.json

インデックス.ts:

import {HelloWorld} from "./HelloWorld";

let world = new HelloWorld();

HelloWorld.ts:

export class HelloWorld {
    constructor(){
        console.log("Hello World!");
    }
}

パッケージ.json:

{
  "type": "module",
  "scripts": {
    "start": "tsc && node index.js"
  }
}

ここで、コマンドを実行するとtsc && node index.js次のエラーが発生します。

internal/modules/run_main.js:54
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'HelloWorld' imported from HelloWorld\index.js
Did you mean to import ../HelloWorld.js?
    at finalizeResolution (internal/modules/esm/resolve.js:284:11)
    at moduleResolve (internal/modules/esm/resolve.js:662:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:752:11)
    at Loader.resolve (internal/modules/esm/loader.js:97:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:50:40)
    at link (internal/modules/esm/module_job.js:49:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

問題は、Typescript ファイルのインポート ステートメント () に拡張子index.tsがないことから発生したようです。Typescript はコンパイル中にエラーをスローしませんでした。ただし、実行時に Node (v14.4.0) は拡張子を必要とします。.jsimport {HelloWorld} from "./HelloWorld";.js

文脈が明確であることを願います。

さて、ファイル内の Typescript から Javascript へのコンパイル中に、次のようなローカル相対パスのインポートimport {HelloWorld} from ./Helloworld;が に置き換えられるように、コンパイラ出力設定 (tsconfig.json または任意のフラグ) を変更するにはどうすればよいでしょうか。import {HelloWorld} from ./Helloworld.js;index.js

注記：It is possible to directly use the .js extension while importing inside typescript file. However, it doesn't help much while working with hundreds of old typescript modules, because then we have to go back and manually add .js extension. Rather than that for us better solution is to batch rename and remove all the .js extension from all the generated .js filenames at last.

ベストアンサー1

私たちが見つけた回避策は次のとおりです。

  1. .jsインポート時に拡張子を使用します:

    ".js"新しいファイルの場合は、編集中に TypeScript ファイルの import ステートメントに拡張子を追加するだけで済みます。例:import {HelloWorld} from "./HelloWorld.js";

  2. 拡張子なしのファイル名

    古いプロジェクトで作業する場合、各ファイルを調べてインポート ステートメントを更新するよりも、単純な自動スクリプトを使用して、生成された JavaScript から名前を一括変更して拡張子を削除する方が簡単であることがわかりました。ただし、拡張子のないこれらのファイルを適切な MIME タイプでクライアントに".js"提供するには、サーバー側のコードに若干の変更が必要になる場合があることに注意してください。".js"

  3. 正規表現を使用してインポート文を一括置換する

    もう 1 つのオプションは、正規表現を使用して、すべてのファイル内のインポート ステートメントを一括検索して置換し、拡張子を追加することです.js。例:https://stackoverflow.com/a/73075563/3330840または同様の他の回答。

おすすめ記事