反応を含まずに反応ベースのコンポーネントをnpmで公開するにはどうすればいいですか？

Question

私はreactとmobxを使う必要がある単純なコンポーネントを持っています。 webpackを通じてライブラリを構築するときには、reactとmobx、mobx-reactをバンドルに含めます。しかし、私はそれらをピア依存関係として追加し、私のモジュールのユーザーにライブラリをインストールさせたいと思います。

これは可能ですか？私のwebpackの設定はこのように見え、dist/build.jsにうまく組み込まれています。ライブラリをどのように除外するかを考える必要があります。

module.exports = { 
    entry: [ './index.js' ], 
    output: { 
     path: path.resolve('./dist'), 
     filename: 'build.js', 
     library: 'myLibrary', 
     libraryTarget: 'commonjs' 
    }, 
    module: { 
     rules: loaders 
    }, 
    plugins: [ 
     new webpack.NoEmitOnErrorsPlugin(), 
     new webpack.optimize.UglifyJsPlugin({ 
      sourceMap: true, 
      compress: { 
       warnings: false 
      } 
     }) 
    ] 
} 

Answer 1

あなたのpackage.jsonで "外部" の依存関係としてマークする必要があります。ここでは

externals: { 'react': 'commonjs react' } 

は、NPMのflawlessy上のコンポーネントを公開に関する短いが非常に有用な製品です：

https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

Answer 2

libの開発とテストのためのビルディングと、消費者が実際に使用するものとの区別が必要です。あなたのlib。彼らはほとんどの場合、あらかじめビルドされたライブラリを使用する必要はありません

あなたのwebpackビルドは、あなた自身の開発目的のためだけであり、この場合、ビルドに反応と他の依存関係をバンドルする必要はありません。

消費者がライブラリをnpm経由で使用する場合、パッケージは通常、ビルドファイルではなくソースコードindex.jsを指している必要があります。独自のビルドではrequire/importとbundleその場合は、libs依存関係ではなくピア依存関係を使用します。

スクリプトを使用して直接使用するビルドを作成する場合は、独自のwebpack設定を使用してディストリビューションを事前ビルドする必要がありますWeb上のタグ、またはtaget UMD commonJSを指定します。その場合、webpackの設定で反応と友人を宣言することができます。externalshttps://webpack.js.org/configuration/externals

ノードモジュールとしてインポートすることによってのみ消費されるのであれば、あなたのパッケージにピア依存関係を追加するだけで十分です消費者によって供給されるのが好き、そしてメインのファイルが参照されていることを確認し、自分のビルドは

"main": "./index.js", // source code entry (this is what consumer requires, at which point their build will trace deps to react etc) 
"peerDependencies": { 
    "react": "*", 
    "mobx-react": "*" // or required min versions 
}