From 9ed03098f926d03bb7fe17ec9ce520916011a28a Mon Sep 17 00:00:00 2001 From: azu Date: Thu, 19 Jan 2023 22:54:05 +0900 Subject: [PATCH 1/7] feat: dual package --- .../2023-01-19-tsconfig-to-dual-package.md | 97 + wp-content/uploads/2023/01/npm-esm-vs-cjs.svg | 2476 +++++++++++++++++ 2 files changed, 2573 insertions(+) create mode 100644 _posts/2023/2023-01-19-tsconfig-to-dual-package.md create mode 100644 wp-content/uploads/2023/01/npm-esm-vs-cjs.svg diff --git a/_posts/2023/2023-01-19-tsconfig-to-dual-package.md b/_posts/2023/2023-01-19-tsconfig-to-dual-package.md new file mode 100644 index 0000000000..109785ec44 --- /dev/null +++ b/_posts/2023/2023-01-19-tsconfig-to-dual-package.md @@ -0,0 +1,97 @@ +--- +title: "TypeScriptライブラリのdual packageを作るために、tsconfig-to-dual-packageを作った" +author: azu +layout: post +date: 2023-01-19T20:57 +category: JavaScript +tags: + - Node.js + - ESM + - JavaScript + - CommonJS + +--- + +現在、npmで公開されているNode.jsのライブラリには、次のような種類があります。 + +- Pure ESM: + `package.json`で`type: 'module'`が指定されていて、ESM形式のみを含むパッケージ + - 基本的にはESMから`import`文で読み込んで利用します + - CJSからは、Dynamic + Import(`import()`)でないと読み込みません(つまり非同期ロードになります) +- Dual Package: + `package.json`の`exports`フィールドを使い、CJSとESMどちらの形式にも対応しているパッケージ + - ESMからは`import`文で読み込んで利用します + - CJSからは`require`関数で読み込んで利用します +- Faux ESM + - `package.json`で`module: "./index.js"`が指定されていて、`import`と`export`のESMのモジュール形式を含むパッケージ + - 主にwebpackのbundlerがTree + Shakingするために、ESMのモジュール形式だけを部分的に採用しているパッケージ + - 基本的にはDualと似ていますが、`exports`フィールドができる前に使われていた形式 + - [Enabling Modern JavaScript on npm - JASON Format](https://jasonformat.com/enabling-modern-js-on-npm/) + - 今はwebpackのbundlerなどはDual + Packageで対応できるため、今後は使われなくなる形式 +- CJS: CommonJS形式のみを含むパッケージ + - `require`関数で読み込んで利用します + +これらのパッケージ形式がnpmの**パッケージ数**でどのぐらいの比率になっているかは、次のようなデータがあります。 +このデータは、[npm-high-impact](https://github.com/wooorm/npm-high-impact)(多く利用されているパッケージ)のパッケージ形式を調べたものになっています。 + +![npm-esm-vs-cjs](/wp-content/uploads/2023/01/npm-esm-vs-cjs.svg) + +> 出典: +> [wooorm/npm-esm-vs-cjs: Data on the share of ESM vs CJS on the public npm registry](https://github.com/wooorm/npm-esm-vs-cjs) + +2022年11月時点ではおおよそ、次のような比率になっています。 + +- Pure ESM — 9% +- Dual Package — 3.8% +- Faux ESM — 13.7% +- CJS — 73.6% + +📝 +[実際に確認](https://github.com/wooorm/npm-esm-vs-cjs/blob/main/data/2022-11-04.json)してみるとESMとなっているものが実際はDualのものがあったため、実際はESMが減りDualはもう増えると思います(axios、parse5、yarg-parser、codemirrorなどの判定がおかしかった)。 + +この比率は、あくまで配布されている最新のバージョンのパッケージ形式の比率です。 +そのため、古いバージョンもインストールできるnpmでは、実際にダウンロードされている比率とは異なります。 + +有名なESMのみのパッケージのダウンロード数を、CJSで配布していた最後のバージョンでのダウンロード数と比較しています。 + +| package name | CJS | ESM | +| --------------------------------------------------------------------------- | ------------------ | ---------------- | +| [node-fetch](https://www.npmjs.com/package/node-fetch?activeTab=versions) | 21,599,451(2.6.7) | 1,032,847(3.3.0) | +| [chalk](https://www.npmjs.com/package/chalk?activeTab=versions) | 120,459,394(4.1.2) | 1,929,524(5.2.0) | +| [log-symbols](https://www.npmjs.com/package/log-symbols?activeTab=versions) | 15,049,341(4.1.0) | 769,470(5.1.0) | +| [remark](https://www.npmjs.com/package/remark?activeTab=versions) | 1,467,455(13.0.0) | 148,451(14.0.2) | +| [got](https://www.npmjs.com/package/got?activeTab=versions) | 2,295,080(11.8.6) | 533,386(12.5.3) | + +基本的には新しいバージョンの方がダウンロードはされにくいですが、大体CJSとESMでは1桁ダウンロード数は異なるようです。 + +とはいえ、[wooorm/npm-esm-vs-cjs](https://github.com/wooorm/npm-esm-vs-cjs)をみるとわかるように、 +CJSのパッケージ数は徐々に減り、代わりにPure ESMとDual Packageが徐々に増えてきています。 +そのため、npmで公開されているパッケージは、CJSからPure ESM または Dual Packageに移行が進んでいます。 + +## ライブラリをDual Pacakgeにする手法 + +ライブラリをPure ESMにするのは、CJSで書いていたものをESMにするだけなので単純です。 +一方で、Dual Packageにするのは、簡単ではない場合もあります。 + +Dual Packageには、大きく分けると次のような実現方法があります。 + +1. CJSとESMで動くコードをそれぞれ書く + - 2つソースコードを書く +2. 1つのソースコードから、CJSとESMのコードを生成しそれぞれを読み込めるようにする + - 1つのパッケージ内にCJS形式とESM形式のコードがそれぞれある +3. 1つのソースコードから、CJSのコードを生成し、ESMはCJSをimportして読むだけのラッパーにする + - パッケージ内にあるのはCJS形式で、ESMはCJSをimportしているラッパーになる +4. 1つのソースコードから、ESMのコードを生成し、CJSはESMをDynamic ImportするProxyとする + - パッケージ内にあるのはESM形式で、CJSはDynamic ImportしてESMを読み込んでいるラッパーになる + +1は2重メンテナンスになるので、ほとんど見たことがありません。 +Dual Packageといった場合には2と3のことを大体言っています。 +4は特殊で、3の逆バージョンです。Viteがやっていますが、難易度が高いです。 + +- [Vite 3 が採用した CJS Proxy による Dual Package 構成](https://zenn.dev/teppeis/articles/2022-07-npm-dual-pacakge-cjs-proxy) + +そのため、主に2と3の方法を使ってDual Packageを作っていきます。 + diff --git a/wp-content/uploads/2023/01/npm-esm-vs-cjs.svg b/wp-content/uploads/2023/01/npm-esm-vs-cjs.svg new file mode 100644 index 0000000000..cd54c91a54 --- /dev/null +++ b/wp-content/uploads/2023/01/npm-esm-vs-cjs.svg @@ -0,0 +1,2476 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + npm-esm-vs-cjs/index.svg at main · wooorm/npm-esm-vs-cjs + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ Skip to content + + + + + + + + + + + + + + +
+ +
+ + + + + + + +
+ + + + + + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ +
+ + + + wooorm  /   + npm-esm-vs-cjs  /   + +
+
+ + + +
+ + +
+
+ Clear Command Palette +
+ + + + +
+
+ Tip: + Type # to search pull requests +
+
+ Type ? for help and tips +
+
+ + +
+
+ Tip: + Type # to search issues +
+
+ Type ? for help and tips +
+
+ + +
+
+ Tip: + Type # to search discussions +
+
+ Type ? for help and tips +
+
+ + +
+
+ Tip: + Type ! to search projects +
+
+ Type ? for help and tips +
+
+ + +
+
+ Tip: + Type @ to search teams +
+
+ Type ? for help and tips +
+
+ + +
+
+ Tip: + Type @ to search people and organizations +
+
+ Type ? for help and tips +
+
+ + +
+
+ Tip: + Type > to activate command mode +
+
+ Type ? for help and tips +
+
+ + +
+
+ Tip: + Go to your accessibility settings to change your keyboard shortcuts +
+
+ Type ? for help and tips +
+
+ + +
+
+ Tip: + Type author:@me to search your content +
+
+ Type ? for help and tips +
+
+ + +
+
+ Tip: + Type is:pr to filter to pull requests +
+
+ Type ? for help and tips +
+
+ + +
+
+ Tip: + Type is:issue to filter to issues +
+
+ Type ? for help and tips +
+
+ + +
+
+ Tip: + Type is:project to filter to projects +
+
+ Type ? for help and tips +
+
+ + +
+
+ Tip: + Type is:open to filter to open content +
+
+ Type ? for help and tips +
+
+ + +
+ +
+
+ We’ve encountered an error and some results aren't available at this time. Type a new search or try again later. +
+ + + No results matched your search + + + + + + + + + + + + + + + + Search for issues and pull requests + + # + + + + Search for issues, pull requests, discussions, and projects + + # + + + + Search for organizations, repositories, and users + + @ + + + + Search for projects + + ! + + + + Search for files + + / + + + + Activate command mode + + > + + + + Search your issues, pull requests, and discussions + + # author:@me + + + + Search your issues, pull requests, and discussions + + # author:@me + + + + Filter to pull requests + + # is:pr + + + + Filter to issues + + # is:issue + + + + Filter to discussions + + # is:discussion + + + + Filter to projects + + # is:project + + + + Filter to open issues, pull requests, and discussions + + # is:open + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + +
+ + +
+
+
+ + + + + + + + +
+ +
+ +
+ +
+ + + + / + + npm-esm-vs-cjs + + + Public +
+ + +
+ +
    +
  • + +
    • + + + +
  • + +
    + + + + + + + Watch + + + 2 + + + +
    +
    +

    Notifications

    + +
    + +
    +
    + + + + + + + + +
    + + +
    +
    +     + + + + +
    +
    +     + + + +
    • + +
  • +
    +
    + Fork + 0 + Fork your own copy of wooorm/npm-esm-vs-cjs +
    +
    + + + +
    + +
    +
    + + + + + + + +
    + +
    +
    +     +
    +
    • + +
  • + + +
    +
    +
    + + +
    + + + +
    + +
    +
    + + + + + + + +
    + +
    +
    +     +
    +
    +
    +
    + +
    + + + +
    + +
    +
    + + + + + + + +
    + +
    +
    +     +
    +
    +
    • + + + +
+ +
+ +
+
+ + + + +
+ + + + + + +
+ Open in github.dev + Open in a new github.dev tab + + + + + + + + + + + + + +
+ + + + + +
+ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + +
+ +
+ + + From 11ebbb8b02ea7fe40f82a92ff0ea0756eb9f9c51 Mon Sep 17 00:00:00 2001 From: azu Date: Thu, 19 Jan 2023 22:55:17 +0900 Subject: [PATCH 2/7] fix --- _posts/2023/2023-01-19-tsconfig-to-dual-package.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_posts/2023/2023-01-19-tsconfig-to-dual-package.md b/_posts/2023/2023-01-19-tsconfig-to-dual-package.md index 109785ec44..73fdc53afb 100644 --- a/_posts/2023/2023-01-19-tsconfig-to-dual-package.md +++ b/_posts/2023/2023-01-19-tsconfig-to-dual-package.md @@ -79,13 +79,13 @@ CJSのパッケージ数は徐々に減り、代わりにPure ESMとDual Package Dual Packageには、大きく分けると次のような実現方法があります。 1. CJSとESMで動くコードをそれぞれ書く - - 2つソースコードを書く + - 2つソースコードを書く 2. 1つのソースコードから、CJSとESMのコードを生成しそれぞれを読み込めるようにする - - 1つのパッケージ内にCJS形式とESM形式のコードがそれぞれある + - 1つのパッケージ内にCJS形式とESM形式のコードがそれぞれある 3. 1つのソースコードから、CJSのコードを生成し、ESMはCJSをimportして読むだけのラッパーにする - - パッケージ内にあるのはCJS形式で、ESMはCJSをimportしているラッパーになる + - パッケージ内にあるのはCJS形式で、ESMはCJSをimportしているラッパーになる 4. 1つのソースコードから、ESMのコードを生成し、CJSはESMをDynamic ImportするProxyとする - - パッケージ内にあるのはESM形式で、CJSはDynamic ImportしてESMを読み込んでいるラッパーになる + - パッケージ内にあるのはESM形式で、CJSはDynamic ImportしてESMを読み込んでいるラッパーになる 1は2重メンテナンスになるので、ほとんど見たことがありません。 Dual Packageといった場合には2と3のことを大体言っています。 From 746605d0a596e841588c867026046c009479ad59 Mon Sep 17 00:00:00 2001 From: azu Date: Thu, 19 Jan 2023 22:55:59 +0900 Subject: [PATCH 3/7] fix --- _posts/2023/2023-01-19-tsconfig-to-dual-package.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/_posts/2023/2023-01-19-tsconfig-to-dual-package.md b/_posts/2023/2023-01-19-tsconfig-to-dual-package.md index 73fdc53afb..55ad16d3ae 100644 --- a/_posts/2023/2023-01-19-tsconfig-to-dual-package.md +++ b/_posts/2023/2023-01-19-tsconfig-to-dual-package.md @@ -80,16 +80,17 @@ Dual Packageには、大きく分けると次のような実現方法があり 1. CJSとESMで動くコードをそれぞれ書く - 2つソースコードを書く -2. 1つのソースコードから、CJSとESMのコードを生成しそれぞれを読み込めるようにする - - 1つのパッケージ内にCJS形式とESM形式のコードがそれぞれある -3. 1つのソースコードから、CJSのコードを生成し、ESMはCJSをimportして読むだけのラッパーにする +2. 1つのソースコードから、CJSのコードを生成し、ESMはCJSをimportして読むだけのラッパーにする - パッケージ内にあるのはCJS形式で、ESMはCJSをimportしているラッパーになる +3. 1つのソースコードから、CJSとESMのコードを生成しそれぞれを読み込めるようにする + - 1つのパッケージ内にCJS形式とESM形式のコードがそれぞれある 4. 1つのソースコードから、ESMのコードを生成し、CJSはESMをDynamic ImportするProxyとする - パッケージ内にあるのはESM形式で、CJSはDynamic ImportしてESMを読み込んでいるラッパーになる + - 2の逆のパターンです 1は2重メンテナンスになるので、ほとんど見たことがありません。 Dual Packageといった場合には2と3のことを大体言っています。 -4は特殊で、3の逆バージョンです。Viteがやっていますが、難易度が高いです。 +4は特殊で、2の逆バージョンです。Viteがやっていますが、難易度が高いです。 - [Vite 3 が採用した CJS Proxy による Dual Package 構成](https://zenn.dev/teppeis/articles/2022-07-npm-dual-pacakge-cjs-proxy) From f8800084e97ff33e88b9ae97f66b19c01c14b991 Mon Sep 17 00:00:00 2001 From: azu Date: Thu, 19 Jan 2023 22:57:08 +0900 Subject: [PATCH 4/7] fix --- wp-content/uploads/2023/01/npm-esm-vs-cjs.svg | 2497 +---------------- 1 file changed, 21 insertions(+), 2476 deletions(-) diff --git a/wp-content/uploads/2023/01/npm-esm-vs-cjs.svg b/wp-content/uploads/2023/01/npm-esm-vs-cjs.svg index cd54c91a54..6165e48494 100644 --- a/wp-content/uploads/2023/01/npm-esm-vs-cjs.svg +++ b/wp-content/uploads/2023/01/npm-esm-vs-cjs.svg @@ -1,2476 +1,21 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - npm-esm-vs-cjs/index.svg at main · wooorm/npm-esm-vs-cjs - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
- Skip to content - - - - - - - - - - - - - - -
- -
- - - - - - - -
- - - - - - -
- - - - - - - - - -
- - - - - - - - - - - - - - - - - -
- -
- - - - wooorm  /   - npm-esm-vs-cjs  /   - -
-
- - - -
- - -
-
- Clear Command Palette -
- - - - -
-
- Tip: - Type # to search pull requests -
-
- Type ? for help and tips -
-
- - -
-
- Tip: - Type # to search issues -
-
- Type ? for help and tips -
-
- - -
-
- Tip: - Type # to search discussions -
-
- Type ? for help and tips -
-
- - -
-
- Tip: - Type ! to search projects -
-
- Type ? for help and tips -
-
- - -
-
- Tip: - Type @ to search teams -
-
- Type ? for help and tips -
-
- - -
-
- Tip: - Type @ to search people and organizations -
-
- Type ? for help and tips -
-
- - -
-
- Tip: - Type > to activate command mode -
-
- Type ? for help and tips -
-
- - -
-
- Tip: - Go to your accessibility settings to change your keyboard shortcuts -
-
- Type ? for help and tips -
-
- - -
-
- Tip: - Type author:@me to search your content -
-
- Type ? for help and tips -
-
- - -
-
- Tip: - Type is:pr to filter to pull requests -
-
- Type ? for help and tips -
-
- - -
-
- Tip: - Type is:issue to filter to issues -
-
- Type ? for help and tips -
-
- - -
-
- Tip: - Type is:project to filter to projects -
-
- Type ? for help and tips -
-
- - -
-
- Tip: - Type is:open to filter to open content -
-
- Type ? for help and tips -
-
- - -
- -
-
- We’ve encountered an error and some results aren't available at this time. Type a new search or try again later. -
- - - No results matched your search - - - - - - - - - - - - - - - - Search for issues and pull requests - - # - - - - Search for issues, pull requests, discussions, and projects - - # - - - - Search for organizations, repositories, and users - - @ - - - - Search for projects - - ! - - - - Search for files - - / - - - - Activate command mode - - > - - - - Search your issues, pull requests, and discussions - - # author:@me - - - - Search your issues, pull requests, and discussions - - # author:@me - - - - Filter to pull requests - - # is:pr - - - - Filter to issues - - # is:issue - - - - Filter to discussions - - # is:discussion - - - - Filter to projects - - # is:project - - - - Filter to open issues, pull requests, and discussions - - # is:open - - - - - - - - - - - - - - - - - - -
- -
- - - - - - - - - - -
- - -
-
-
- - - - - - - - -
- -
- -
- -
- - - - / - - npm-esm-vs-cjs - - - Public -
- - -
- -
    -
  • - -
    • - - - -
  • - -
    - - - - - - - Watch - - - 2 - - - -
    -
    -

    Notifications

    - -
    - -
    -
    - - - - - - - - -
    - - -
    -
    -     - - - - -
    -
    -     - - - -
    • - -
  • -
    -
    - Fork - 0 - Fork your own copy of wooorm/npm-esm-vs-cjs -
    -
    - - - -
    - -
    -
    - - - - - - - -
    - -
    -
    -     -
    -
    • - -
  • - - -
    -
    -
    - - -
    - - - -
    - -
    -
    - - - - - - - -
    - -
    -
    -     -
    -
    -
    -
    - -
    - - - -
    - -
    -
    - - - - - - - -
    - -
    -
    -     -
    -
    -
    • - - - -
- -
- -
-
- - - - -
- - - - - - -
- Open in github.dev - Open in a new github.dev tab - - - - - - - - - - - - - -
- - - - - -
- - - -
-
- -
- - - - - - - - - - - - - - - - - - - -
- -
- - - +ESM vs. CJS on npm6.1%1.7%14.8%77.4%2021-08-247.3%2.1%14.3%76.3%2021-11-097.7%2.6%14.2%75.4%2022-01-278.7%3.6%13.8%73.9%2022-08-019.0%3.8%13.7%73.6%2022-11-04esmdualfauxcjs \ No newline at end of file From 1338e28fb5e7bc14d8c06bc10ae4492ae6f0e4ba Mon Sep 17 00:00:00 2001 From: azu Date: Thu, 19 Jan 2023 23:03:08 +0900 Subject: [PATCH 5/7] update --- .../2023-01-19-tsconfig-to-dual-package.md | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/_posts/2023/2023-01-19-tsconfig-to-dual-package.md b/_posts/2023/2023-01-19-tsconfig-to-dual-package.md index 55ad16d3ae..307e1fda42 100644 --- a/_posts/2023/2023-01-19-tsconfig-to-dual-package.md +++ b/_posts/2023/2023-01-19-tsconfig-to-dual-package.md @@ -96,3 +96,32 @@ Dual Packageといった場合には2と3のことを大体言っています。 そのため、主に2と3の方法を使ってDual Packageを作っていきます。 +## 1. Pure ESM + +- CLIなどのツールを作るならこれでいい +- CLIならパッケージがESMであっても、CJSであってもCLIユーザーには関係ない + +## 2 index.mjsラッパーのアプローチ + +[Packemon](https://packemon.dev/)が対応してる + +- やや保守的なアプローチ +- CJSがソースになる、ESMはCJSをimportしているラッパーになる + +## 3 dual source packageのアプローチ + +[tsconfig-to-dual-package](https://github.com/azu/tsconfig-to-dual-package)で対応したパターン + +- [Dual package hazard](https://nodejs.org/api/packages.html#dual-package-hazard)という問題がある + - ただし、実際にこれのhazardはそこまで問題ないとは思ってる + - シングルトンとかステートフルなものは書かないようにする。今時のライブラリは大体そうなってる感じもする + - Symbolはちょっと気をつける必要があるが、そこまで登場頻度が高いわけでもない +- 実際の問題はパッケージ自体から `__dirname` や別のESMライブラリは参照するのが難しくなる + - →　そのため向いているのは、依存が不要でロジックが入ってるようなライブラリ + +## 4 dynamic import proxyのアプローチ + +- これはViteぐらいしか知らない +- textlintでやってみようとしたけど、互換性を作るにはインターフェースが全部asyncになってないと厳しい +- これは、ESMがソースになる、CJSはESMをDynamic Importしているラッパーになる +- 作りが特殊なので、ある程度形がはっきりしてないとできない \ No newline at end of file From a780b95102d47ba45763eed6331a77c1163fc802 Mon Sep 17 00:00:00 2001 From: azu Date: Thu, 19 Jan 2023 23:09:33 +0900 Subject: [PATCH 6/7] fix --- _posts/2023/2023-01-19-tsconfig-to-dual-package.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/_posts/2023/2023-01-19-tsconfig-to-dual-package.md b/_posts/2023/2023-01-19-tsconfig-to-dual-package.md index 307e1fda42..64a49163bf 100644 --- a/_posts/2023/2023-01-19-tsconfig-to-dual-package.md +++ b/_posts/2023/2023-01-19-tsconfig-to-dual-package.md @@ -100,6 +100,8 @@ Dual Packageといった場合には2と3のことを大体言っています。 - CLIなどのツールを作るならこれでいい - CLIならパッケージがESMであっても、CJSであってもCLIユーザーには関係ない +- ライブラリでこれをやると、古いバージョンで問題が起きた時に、メンテナンスが難しい + - まだメジャーはCJSを使ってる人の方が多いため、バックポートとかが発生してしまう ## 2 index.mjsラッパーのアプローチ @@ -107,6 +109,9 @@ Dual Packageといった場合には2と3のことを大体言っています。 - やや保守的なアプローチ - CJSがソースになる、ESMはCJSをimportしているラッパーになる +- ESMを扱う旨味があんまりない +- Node.jsでは、ESMからCJSは普通にロードはできるので、ライブラリをESMとして読めてもそこまで嬉しさがない(全体がESMじゃないのでTree Shakingとかそういうのはできないのは同じ) + ## 3 dual source packageのアプローチ @@ -118,10 +123,12 @@ Dual Packageといった場合には2と3のことを大体言っています。 - Symbolはちょっと気をつける必要があるが、そこまで登場頻度が高いわけでもない - 実際の問題はパッケージ自体から `__dirname` や別のESMライブラリは参照するのが難しくなる - →　そのため向いているのは、依存が不要でロジックが入ってるようなライブラリ +- でかいものをやるとハマりどころはたくさんあるので、ライブラリ向き ## 4 dynamic import proxyのアプローチ - これはViteぐらいしか知らない - textlintでやってみようとしたけど、互換性を作るにはインターフェースが全部asyncになってないと厳しい - これは、ESMがソースになる、CJSはESMをDynamic Importしているラッパーになる -- 作りが特殊なので、ある程度形がはっきりしてないとできない \ No newline at end of file +- 作りが特殊なので、ある程度形がはっきりしてないとできない +- 一度ラッパーができてインターフェースが変わらないなら、ソースはESMになるので2よりは良いかもしれない \ No newline at end of file From 40cf91db91d73b47039413a5838d2ca6bfaf92ed Mon Sep 17 00:00:00 2001 From: azu Date: Thu, 19 Jan 2023 23:10:15 +0900 Subject: [PATCH 7/7] fix --- _posts/2023/2023-01-19-tsconfig-to-dual-package.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_posts/2023/2023-01-19-tsconfig-to-dual-package.md b/_posts/2023/2023-01-19-tsconfig-to-dual-package.md index 64a49163bf..299a8de458 100644 --- a/_posts/2023/2023-01-19-tsconfig-to-dual-package.md +++ b/_posts/2023/2023-01-19-tsconfig-to-dual-package.md @@ -131,4 +131,5 @@ Dual Packageといった場合には2と3のことを大体言っています。 - textlintでやってみようとしたけど、互換性を作るにはインターフェースが全部asyncになってないと厳しい - これは、ESMがソースになる、CJSはESMをDynamic Importしているラッパーになる - 作りが特殊なので、ある程度形がはっきりしてないとできない -- 一度ラッパーができてインターフェースが変わらないなら、ソースはESMになるので2よりは良いかもしれない \ No newline at end of file +- 一度ラッパーができてインターフェースが変わらないなら、ソースはESMになるので2よりは良いかもしれない + - ESMである旨味 = ESMのライブラリとか利用できる、今後はESMが主流になるので、ESMであることは正しい \ No newline at end of file