package.json がすごい

2023/06/22 Sendai Front-End User Group #9

Transcript

1. package.json がすごい 2023/06/22 Sendai Front-End User Group
2. 自己紹介 江口 拓弥 インフラ知識が壊滅的なWebのフロントエンド開発者 2018年に東京から仙台にお引越ししてきました 2019年から複数プロジェクトの新規事業で開発業務やってます 父親になりました👶 akathea_
3. 突然ですが、 NPM パッケージ公開してますか？ monorepo やってますか？
4. 超簡単な NPM パッケージのおさらい package.json @sfeug/sample index.js package.json @sfeug/caller index.js 実行結果 registry ( npm, GitHub packages) ※monorepo で直接参照も可能 公開 参照
5. package.json のおさらい おそらくここにいる人はみんな知ってる、 JavaScript プロジェクトで開発を行う際に 必ず利用する構成ファイルです。 仕様はこちらで公開されてます。 https://docs.npmjs.com/cli/v9/configuring-npm/package-json This document is all you need to know about what's required in your package.json file. It must be actual JSON, not just a JavaScript object literal. A lot of the behavior described in this document is affected by the config settings described in config. （日本語） このドキュメントは package.json を 使用するときに知っておくべきことの 「全て」です
6. ところで、 今は令和なので プロジェクトは TypeScript ですよね？
7. 単純に TS に置き換えてもコンパイラが「型情報がない」と怒ってくる @sfeug/caller ❯ yarn start /Users/takuya/.n/lib/node_modules/ts-node/src/index.ts:859 return new TSError(diagnosticText, diagnosticCodes, diagnostics); ^ TSError: ⨯ Unable to compile TypeScript: index.ts:1:15 - error TS7016: Could not find a declaration file for module '@sfeug/sample'. '/Users/takuya/dev/sfeug/packages/sample/index.js' implicitly has an 'any' type. Try `npm i --save-dev @types/sfeug__sample` if it exists or add a new declaration (.d.ts) file containing `declare module '@sfeug/sample';` 1 import a from '@sfeug/sample'; ~~~~~~~~~~~~~~~ index.ts
8. sample パッケージに型情報をつける package.json @sfeug/sample index.js index.d.ts
9. @sfeug/caller うごいた！ index.ts
10. ところで types の仕様を 本家の資料で調べても 定義されていないんだが https://docs.npmjs.com/cli/v9/configuring- npm/package-json
11. TypeScript の仕様として 定義されてた https://www.typescriptlang.org/docs/handbook/ declaration-files/publishing.html npm の仕様としては型に関する仕様は未提供 TS が package.json をよしなに見に行っている ※DefinitelyTyped (@types/◯◯)も同じ仕組み
12. が、npm.js では TS アイコンで 型情報が提供されているかを 表示している🤔
13. 雲行きが怪しい、が気を取り直して...
14. 依存される側の sample も TS で書きたいですね？
15. 一般的な TS プロジェクトの構成はこんな感じ ビルド結果を dist へ tsconfig.json の話は 今回はしません󰢜
16. main を書けばよいね main を省略すればプロジェクト直下の index.js がエントリーポイントになる （これは npm の package.json の仕様に書いてある😌）
17. ところで、 CommonJS でも ES Modules でも 使えるパッケージ ってどうなってんの？
18. なんか知らんのある apollo/client の例
19. module の仕様を 本家の資料で調べても(ry https://docs.npmjs.com/cli/v9/configuring- npm/package-json
20. module に関する Node の Proposal を発見 https://github.com/dherman/defense-of-dot-js /blob/master/proposal.md 要は main = CommonJS のエントリーポイント、 module = ES Modules のエントリーポイント の定義としたらよいのでは？という内容。 proposal なので公式ではない。
21. Node v12 で module ではなく exports が採用されてた https://nodejs.org/api/packages.html#expo rts ただし ES Modules 用ではない。 ES Modules なのかを判断するのは type に module が設定されているか。 なので exports は CommonJS でも使える。 実際に React の package.json を 見ると利用してた。 ちなみに React には type がないので、CommonJS。
22. なお exports の仕様を 本家の資料で調べても(ry https://docs.npmjs.com/cli/v9/configuring- npm/package-json
23. なのに Webpack は module を サポートしている https://webpack.js.org/guides/package-exp orts/#notes-about-ordering
24. browser … ? （見なかったことにします）
25. package.json のおさらい（再掲） おそらくここにいる人はみんな知ってる、 JavaScript プロジェクトで開発を行う際に 必ず利用する構成ファイルです。 仕様はこちらで公開されてます。 https://docs.npmjs.com/cli/v9/configuring-npm/package-json This document is all you need to know about what's required in your package.json file. It must be actual JSON, not just a JavaScript object literal. A lot of the behavior described in this document is affected by the config settings described in config. （日本語） このドキュメントは package.json を 使用するときに知っておくべきことの 「全て」です
26. 「全て」ではないよね
27. NPM パッケージ公開してますか？ monorepo やってますか？ package.json ってなんなんですか？
28. package.json npm TypeScript NodeJS Bundler プロジェクトが依存する パッケージの構成管理 作者やライセンス等の 公開するパッケージの情報管理 TS環境への型情報の提供 ランタイムへの 複雑な entrypoint 情報の提供 Webpack/Gulp等 バンドルツールへの 構成情報の提供
29. package.json npm TypeScript NodeJS Bundler プロジェクトが依存する パッケージの構成管理 作者やライセンス等の 公開するパッケージの情報管理 TS環境での型情報の提供 ランタイムへの 複雑な entrypoint 情報の提供 Webpack等の バンドルツールへの 構成情報の提供 だけじゃない！ yarn で間接依存パッケージのバージョンを指定できる resolution、 pnpm でローカルのパッケージへのハードリンクができる dependenciesMeta 、 ちょっと前までは割とやってた ESLint や Jest の設定まで... package.json は 複数のエコシステムが 独自に拡張していて すごいことになってます！
30. NPM パッケージ公開してますか？ monorepo やってますか？ package.json ってなんなんですか？ →npm パッケージの依存関係と メタデータの管理を主目的とした、 複数の JavaScript エコシステムが利用している、 プロジェクトの共通構成管理ファイル。
31. ランタイムやバージョンは？（Node? Deno? Bun?） パッケージマネージャーは？（npm? Yarn? pnpm?） パッケージのモジュール型は？（CJS? ESM? UMD?） バンドラは？（未使用? Webpack? Gulp?） TypeScript 対応してる ? この辺を確認した上でパッケージの設定をしたり npmパッケージをコードリーディング すると良いと思います。 package.json を上手に読み解くには...
32. 実はすごいのでは いろんなエコシステムの設定を１つの JSON ファイルで管理できる、 package.json さん、懐が深いですね。
33. 【追記】 package.json の jsonSchema を見ると面白いです https://github.com/SchemaStore/schemastore/blob/master/src/schemas/json/package.json
34. おわり