Rollup-plugin-typescript2: 宣言ファイル (d.ts) のパス エイリアスを解決する

タイプスクリプトの人々によると、あなたはそれを逆に使用しています:

これに関する私たちの一般的な考え方は、TS 用にすぐに動作するインポートを作成してから試すのではなく、実行時に機能するインポート パスを作成し、コンパイラのモジュール解決ステップを満たすように TS フラグを設定する必要があるということです。実行時に動作するものへのパスを「修正」する他のステップを実行します。

https://github.com/microsoft/TypeScript/issues/15479

現在、このプラグインは、typescript によって発行された型宣言を後処理したり解析したりしません。

検索/置換よりも少し良いことができるかもしれませんが、これを一般的に解決するには、基本的に型宣言のロールアップを再実装する必要があります (私が見ていないときに、バンドルされた宣言を生成するための言語サービス API がすでに追加されていない限り)。

返信いただきありがとうございます。 大雑把な検索/置換後処理ステップをアタッチするために使用できるウォッチ モードとビルド モードの両方で実行される「ポスト排出」フックはありますか?

d.ts ファイルはロールアップ パイプラインに直接出力されるため ( useTsconfigDeclarationDir: falseオプションが使用されている場合)、それらを変換するロールアップ プラグインを作成できます。

ただし、バンドルが書き込まれるときに出力されるため、 transform代わりにgenerateBundleフックを使用する必要がある場合があります。

それがうまくいかない場合。 rpt2 自体に事前書き込みフックを追加できます。

同じ問題が発生し、ここで回避策を見つけました
現在、 ttscとtypescript-transform-pathsを使用して、ロールアップで出力された ts ファイルの後に宣言ファイルを生成します。冗長ですが、動作します...

ええ、私も ttsc を使用してこれを達成しています。 rollup-plugin-typescript2 transformersオプションでトランスフォーマーを直接動作させることができなかったので、 ttscを使用することにしました。

私のロールアップ構成は次のようになります。

import typescript from 'rollup-plugin-typescript2'

export default {
  input: `src/index.ts`,
  preserveModules: true,
  output: {
    format: 'esm',
    dir: './dist'
  },
  external: [],
  watch: {
    include: 'src/**',
  },
  plugins: [
    typescript({ 
      typescript: require('ttypescript'),
      tsconfigDefaults: {
        compilerOptions: {
          plugins: [
            { "transform": "typescript-transform-paths" },
            { "transform": "typescript-transform-paths", "afterDeclarations": true }
          ]
        }
      }
    }),
  ],
}

@alshdavidさん、ありがとうございtypescript-transform-pathsを使用して解決しました! ありがとうございます💪

// webpack.config.js
module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: require.resolve('ts-loader'),
            options: {
              compiler: 'ttypescript',
            },
          },
          {
            loader: require.resolve('react-docgen-typescript-loader'),
          },
        ],
        exclude: /(node_modules)/,
      },
    ],
  },

// tsconfig.json
compilerOptions: {
  "plugins": [
     { "transform": "typescript-transform-paths" },
     { "transform": "typescript-transform-paths", "afterDeclarations": true }
   ]
}

この解決策は過去に私にとってはうまくいきましたが、現在、次のようなエラーが発生する多くの状況を見つけています。

UnhandledPromiseRejectionWarning: TypeError: 未定義のプロパティ 'text' を読み取れません

エイリアス (およびこれらのプラグイン) の使用をやめると、問題なく動作します。 他の誰かがこの問題を抱えていますか?

この解決策は過去に私にとってはうまくいきましたが、現在、次のようなエラーが発生する多くの状況を見つけています。

UnhandledPromiseRejectionWarning: TypeError: 未定義のプロパティ 'text' を読み取れません

エイリアス (およびこれらのプラグイン) の使用をやめると、問題なく動作します。 他の誰かがこの問題を抱えていますか?

私は同じエラーがあります

この解決策は過去に私にとってはうまくいきましたが、現在、次のようなエラーが発生する多くの状況を見つけています。

UnhandledPromiseRejectionWarning: TypeError: 未定義のプロパティ 'text' を読み取れません

エイリアス (およびこれらのプラグイン) の使用をやめると、問題なく動作します。 他の誰かがこの問題を抱えていますか?

こんにちは、私は同じ問題を出していますが、別のコンテキストで:私はロールアップを使用して、Vue と Typescript で記述されたコンポーネント ライブラリをバンドルしています。 これはrollup.config.jsファイルです。

import path from "path";

import alias from "@rollup/plugin-alias";
import cleaner from "rollup-plugin-cleaner";
import css from "rollup-plugin-css-only";
import scss from "rollup-plugin-scss";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue";

export default [
  {
    input: "./src/index.ts",
    preserveModules: true,
    output: {
      format: "esm",
      dist: "./dist"
    },
    plugins: [
      cleaner({ targets: ["dist/"] }),
      alias({
        resolve: [".ts", ".vue"],
        entries: { "@/": path.resolve(__dirname, "./src/") }
      }),
      css({ output: "dist/bundle.css" }),
      scss(),
      typescript({
        typescript: require("ttypescript"),
        tsconfigDefaults: {
          compilerOptions: {
            plugins: [
              { transform: "typescript-transform-paths" },
              {
                transform: "typescript-transform-paths",
                afterDeclarations: true
              }
            ]
          }
        }
      }),
      vue({ css: false })
    ]
  }
];

エイリアスを解決するために、 rollup --config後にttsc --emitDeclarationOnlyコマンドをすでに使用していますが、ロールアップによって生成された.vue.d.tsファイルは処理されません (もちろん)。

ttypescriptとtypescript-transofrm-pathsで同じ問題が発生しましたが、機能しませんでした:がっかりしました。 ビルドの実行時:

[!] (plugin rpt2) TypeError: Cannot read property 'text' of undefined

しかし、 @zerollup/ts-transform-pathsとttypescriptすると動作します 🎉

ここに素晴らしいセットアップがあります: https://www.npmjs.com/package/@zerollup/ts -transform-paths#setup-for-rollup-plugin-typescript2

_rollup.config.js_

import ttypescript from 'ttypescript'
import tsPlugin from 'rollup-plugin-typescript2'

export default {
    input: 'src/lib.ts',
    output: [{ file : 'dist/lib.js', name : 'mylib', format : 'iife', sourcemap : true }],
    plugins: [
        tsPlugin({
            typescript: ttypescript
        })
    ]
}

_tsconfig.json_

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "my-lib/*": ["src/*"]
        },
        "plugins": [
            {
                "transform": "@zerollup/ts-transform-paths",
                "exclude": ["*"]
            }
        ]
    }
}

すごい！ 別の方法で解決しましたが、このプラグインとは関係ありません。 typescript-transform-path と ttypescript を削除し、現在のプラグイン (typescript()) をそのまま残しました。 問題を解決するために、ロールアップ後に tsc-alias を使用しました。 生成後に .d.ts ファイルを処理するため、vue ファイルも置き換えます。

問題を解決するために、ロールアップ後にtsc-aliasを使用しました。 生成後に .d.ts ファイルを処理するため、vue ファイルも置き換えます。

@mantlebee tsconfig.jsonとロールアップ構成の例を投稿してもよろしいですか?

しかし、 @zerollup/ts-transform-pathsとttypescriptすると動作します 🎉

@luanorlandiは実行時にts-transform-path動作しませんか? おそらく、ライブラリ コードには適していません。

問題を解決するために、ロールアップ後にtsc-aliasを使用しました。 生成後に .d.ts ファイルを処理するため、vue ファイルも置き換えます。

@mantlebee tsconfig.jsonとロールアップ構成の例を投稿してもよろしいですか?

重要なプロパティはdeclaration 、 declarationDir 、 outDir

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "declaration": true,
    "declarationDir": "dist/src",
    "baseUrl": ".",
    "outDir": "dist/src",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

シンプルなrollup.config.jsファイル

import path from "path";

import alias from "@rollup/plugin-alias";
import cleaner from "rollup-plugin-cleaner";
import scss from "rollup-plugin-scss";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue";

export default [
  {
    input: "src/index.ts",
    output: {
      format: "esm",
      file: "dist/elegere-ui.js"
    },
    plugins: [
      cleaner({ targets: ["dist/"] }),
      alias({
        resolve: [".ts", ".vue"],
        entries: { "@/": path.resolve(__dirname, "src/") }
      }),
      scss(),
      typescript({
        useTsconfigDeclarationDir: true
      }),
      vue()
      //{ css: false }
    ]
  }
];

次に、すべてをprepublishOnlyコマンドに入力します (これは便利だからです)

"prepublishOnly": "npm run rollup && tsc-alias && npm run docs"

TSC-ALIAS はdist/srcフォルダー内で置換を実行します。 ts-alias は、src フォルダー内にあると考えているエイリアスを置き換えるため、すべてをその中に入れることにしました。

最適な結論ではありませんが、機能します。 @luanorlandiからソリューションを

もちろん、他のすべての lib は、 jestように、 dist/srcフォルダーを避けるように構成する必要があります。

しかし、 @zerollup/ts-transform-pathsとttypescriptすると動作します 🎉

@luanorlandiは実行時にts-transform-path動作しませんか? おそらく、ライブラリ コードには適していません。

ライブラリが説明しているように、トランスフォーマーはビルドステップ専用です。

_...tsconfig baseUrl + バンドルおよび宣言ファイル内のパス エイリアスの書き換え。 それらはすべて、トランスパイルされたjsとd.tsファイルで相対に書き直されます._

https://www.npmjs.com/package/@zerollup/ts -transform-paths