Upgrade to Pro — share decks privately, control downloads, hide ads and more …

package.json がすごい

package.json がすごい

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

Avatar for Takuya Eguchi (egch)

Takuya Eguchi (egch)

June 23, 2023
Tweet

More Decks by Takuya Eguchi (egch)

Other Decks in Programming

Transcript

  1. 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 を 使用するときに知っておくべきことの 「全て」です
  2. 単純に 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
  3. module に関する Node の Proposal を発見 https://github.com/dherman/defense-of-dot-js /blob/master/proposal.md 要は main

    = CommonJS のエントリーポイント、 module = ES Modules のエントリーポイント の定義としたらよいのでは?という内容。 proposal なので公式ではない。
  4. 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。
  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. package.json npm TypeScript NodeJS Bundler プロジェクトが依存する パッケージの構成管理 作者やライセンス等の 公開するパッケージの情報管理 TS環境での型情報の提供

    ランタイムへの 複雑な entrypoint 情報の提供 Webpack等の バンドルツールへの 構成情報の提供 だけじゃない! yarn で間接依存パッケージのバージョンを指定できる resolution、 pnpm でローカルのパッケージへのハードリンクができる dependenciesMeta 、 ちょっと前までは割とやってた ESLint や Jest の設定まで... package.json は 複数のエコシステムが 独自に拡張していて すごいことになってます!
  7. ランタイムやバージョンは?(Node? Deno? Bun?) パッケージマネージャーは?(npm? Yarn? pnpm?) パッケージのモジュール型は?(CJS? ESM? UMD?) バンドラは?(未使用?

    Webpack? Gulp?) TypeScript 対応してる ? この辺を確認した上でパッケージの設定をしたり npmパッケージをコードリーディング すると良いと思います。 package.json を上手に読み解くには...