web-dev-qa-db-ja.com

Reactコンポーネントのpackage.jsonでreactする依存関係を追加する正しい方法は何ですか

私はいくつかの単純な再利用可能な反応コンポーネントを作成し、npmで公開するためにpackage.jsonに反応する依存関係を含める正しい方法を知りたいと思いました。

私は現在これをやっています：

コンポーネントが最新バージョンのreactを使用し、テスト済みであり、そのバージョンで動作すると仮定します。例えば0.13.3

"peerDependencies": { 
  "react": "^0.13.3"
},
node.jsnpmreactjs
23
svnm

再利用可能なコンポーネントの場合：

  1. reactとpeerDependenciesの両方にdevDependencies依存関係を配置します。
  2. Neverreactにdependencies依存関係を設定します。

peerDependenciesは、再利用可能なコンポーネントがサポート/要求するReactのバージョンを指定します。 npm 2を使用する場合、インストールするモジュールのリストにReactも追加されますが、npm 3の場合はそうではありません。

devDependenciesは、コンポーネントの開発中にnpm installを実行するとき、またはTravisなどでテストを実行するときにReactがインストールされるようにします。

reactにdependenciesを入れると、誰かがコンポーネントを使用しているが、自分のpackage.jsonに異なるバージョンのReactがある場合、複数のバージョンのReactがインストールされます。 Reactのバージョンは、ビルドを膨張させるだけでなく、異なるバージョンが対話しようとするとエラーを引き起こします。

46
Jonny Buchanan

ここで選択した答えは間違いなく規定されたアプローチですが、ライブラリの依存関係をnpmピアの依存関係に依存するのではなく、制御の反転の使用を好むようになりました。

ライブラリは、機能的にビルドすると簡単です。単一の関数をエクスポートするライブラリを維持する方が簡単です。この関数は、重い依存関係をすべて持つオブジェクトを取り込み、各ライブラリの典型的なエクスポートを含むオブジェクトをエクスポートします。

ライブラリ「注入済み」

lib/index.js

export default ({ React }) => {
  const InjectedComponent = props => (
    <p style={{color: props.color}}>This component has no React npm dependencies.</p>
  )

  /** other stuff */

  return { InjectedComponent }
}

消費アプリ

app.js

import React from 'react'
import { render } from 'react-dom

/** Import the default export factory from our library */
import createInjectedComponent from 'injected'

/** Call the factory, passing its dependencies (guaranteed to match what we're bundling) and get back our component */
const { InjectedComponent } = createInjectedComponent({ React })

render(<InjectedComponent color="blue" />, document.getElementById('root'))

コンポーネントが特定のバージョンのreactまたはその他の依存関係でのみ動作する場合、渡されるReactパラメーターのバージョンについてアサーションを書くことができます。全体として、この方法でライブラリを構築する必要がありますReactのバージョンが公開され、ライブラリコンシューマーにReact =およびその他の重いライブラリ。このパターンはnpmリンクでうまく機能します（通常、npmリンクから実行される16以上のライブラリがあり、このパターンを使用しなかったときに問題が発生しました）。

メインアプリでは、使用する反応、反応dom、および反応するlibコンポーネントを常にベンダーバンドル（webpack）に分割し、メインバンドルで外部としてマークして、2つのバージョンを意図せずにバンドルしないようにすることをお勧めします。

4
cchamberlain