ホームページ  >  記事  >  ウェブフロントエンド  >  npm パッケージ内の絶対パス ステートメントをトランスパイルする

npm パッケージ内の絶対パス ステートメントをトランスパイルする

WBOY
WBOYオリジナル
2024-08-29 12:41:52743ブラウズ

今日、私はライブラリ、.d.ts ファイル、相対パスに関連する Typescript の複雑な状況に直面しました。


React コンポーネント (型を含む) のライブラリを npm に公開します。

私たちのフロントエンド プロジェクトには、他の npm パッケージと同様にこのライブラリが含まれています。

通常、フロントエンド プロジェクトの tsconfig.json にはオプション「skipLibCheck: true」が含まれています

Ts transpiling absolute path statements in your npm package

私たちのアプリの 1 つはこのフラグを持っていませんでした (デフォルトではこのフラグは無効になっており、正直なところ、誰がこの動作を望んでいるのかわかりません)

Ts transpiling absolute path statements in your npm package


問題は、フラグが存在せず、ts エラーが発生していたことです:

Ts transpiling absolute path statements in your npm package

これはかなりのエラーでした。私たちのライブラリから配布されたファイルが絶対パスから何かをインポートしようとしていました

import { Foo } from 'absolutePath';

この行はライブラリ自体では意味がありますが、node_modules/bla/bla/bla では意味がありません

その通りです。この絶対パスはここにありますか?

Ts transpiling absolute path statements in your npm package

dist/ フォルダーを調べて、結果として得られたコンポーネント ファイルの一部が相対パスを使用して適切にトランスパイルされていることを確認しました。

Ts transpiling absolute path statements in your npm package


パニック瞬間: トランスパイルされた .d.ts ファイルの一部が絶対パスを使用し、他のファイルが相対パスを使用するのはなぜですか ????


スタック オーバーフローのいくつかの投稿と問題、スレッド、GitHub でのディスカッションは後ほど (うまくいかなかったものはスキップします)

ビルド時にこの vite 警告 に気付きました:

Export of «module» was reexported through «file» 
while both modules are dependencies of each other 
and will end up in different chunks by Rollup.

Ts transpiling absolute path statements in your npm package

それで... 循環依存関係 です。


インポート ステートメントの循環依存関係を解決しました。現在はすべて問題ありません。

TL;DR

Ts に関する問題に直面している場合は?ライブラリ内の相対パスではなく絶対パス ステートメントをトランスパイルします。
これにより、クライアント アプリで Ts エラーが発生します。ソース コード内の 循環依存関係 が原因である可能性があります。

--
読んでいただきありがとうございます

X の私の元のスレッド

以上がnpm パッケージ内の絶対パス ステートメントをトランスパイルするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。