こんにちは。私
はお金を扱うときのユーザーエクスペリエンスの向上に専念するチームで働いています。フロントエンドはnpmパッケージで提供されます。
ある時点で、私は
フィールドを使用するようになった問題に遭遇しexports
ましたpackage.json
問題#1
パッケージは同じ名前の関数をエクスポートできますが、異なることを行います。例として、ReatomとEffectorの2つの状態マネージャーを取り上げましょう。
関数をエクスポートしますcreateStore
。それらを1つのパッケージからエクスポートしようとすると(それを呼びましょうvendors
)、次の図が表示されます。
// @some/vendors/index.ts
export { createStore } from '@reatom/core';
export { createStore } from 'effector';
名前の競合があります。この種のコードは機能しません。
これは次の方法で回避できますas
:
// @some/vendors/index.ts
export { createStore as reatomCreateStore } from '@reatom/core';
export { createStore as effectorCreateStore } from 'effector';
率直に言って、お粗末に見えます。友好的な方法で、as
一貫性を維持するために、各再エクスポートを書き留める必要があります。これは私にとってDXを悪化させます。
私は名前の衝突と書く必要性の両方を回避する解決策を探し始めましたas
。どのように見えるでしょうか...たとえば、次のようになります。
// @some/vendors/reatom.ts
export { createStore } from 'reatom';
// @some/vendors/effector.ts
export { createStore } from 'effector';
2つの異なるファイルで、通常のエクスポートを記述し、必要な実装をインポートしますcreateStore
。
// someFile.ts
import { createStore } from 'vendors/effector';
#2
vendors
, , -, - . , Runtypes.
exports
, :
// someFile.ts
import { createStore, Dictionary, createEvent, Record } from 'vendors';
- . , - :
// someFile.ts
import { createStore, createEvent } from 'vendors/effector';
import { Dictionary, Record } from 'vendors/runtypes';
. .
// someFile.ts
import { createStore, createEvent } from 'vendors/state';
import { Dictionary, Record } from 'vendors/contract';
, exports
package.json
// package.json
"exports": {
"./contract": "./build/contract.js",
"./state": "./build/state.js",
"./package.json": "./package.json"
}
, . TypeScript, .
package.json types
, , . . contract
, state
. ?
typesVersions
package.json
// package.json
"typesVersions": {
"*": {
"contract": ["build/contract.d.ts"],
"state": ["build/state.d.ts"]
}
}
, exports
, d.ts
, .
exports
vendors
. DX.
, Effector :
import { createEvent } from 'effector';
:
import { createEvent } from 'effector/compat';
!