npmパッケージをwebpackにバンドルしてオブジェクトとして公開するにはどうすればいいですか？

Question

私は実際にこれが可能であるとは確信していませんが、私がやっていることは、いくつかのNPMパッケージをとり、Webpackを使ってそれらを一緒にバンドルし、各パッケージがプロパティであるオブジェクトとして公開することです。

私はreactとバンドルさreact-domを望んでいた場合と同様に、例えば、それはそのオブジェクトを提供するだろう：私の現在の構成がある

{ 
    'react': /* react code */, 
    'react-dom': /* react-dom code */ 
} 

：

module.exports = { 
    entry: [ 'react', 'react-dom' ], 
    output: { 
    path: __dirname + '/public', 
    publicPath: 'http://localhost:8081/public/', 
    filename: 'bundle.js', 
    libraryTarget: 'umd', 
    } 
}; 

これは多少、実際に動作しているようですがそれはオブジェクトを返しますが、それが返すオブジェクトは最後のentryパッケージであるため、この場合、オブジェクトにはすべてreact-domのメソッドが含まれています。

entryの配列の順番を[ 'react-dom', 'react' ]に変更する場合は、reactのメソッドだけが公開されます。

アイデアは、私はまたexpose-loaderを使用してみましたreact.Componentまたはreact.PureComponent

のようなそのプロパティを使用して、両方のパッケージのメソッドにアクセスできるようにオブジェクトをエクスポートすることですが、それは、上記と同様の結果が得られ、Iない限り、それを間違って設定しました。

これを実現するためにwebpackを正しく設定する方法に関するアイデアはありますか？

Answer 1

私はあなたが何をしたいのかを正しく理解していれば、あなただけの、のは言わせて設定することができ、このような構造を持つbundle-source.js：

exports.react = require('react'); 
exports['react-dom'] = require('react-dom'); 
exports.anyModule = require('anyModule'); 

次に、あなたがあなたのWebPACKのconfにのエントリポイントとしてbundle-source.jsいることを設定します。

module.exports = { 
    entry: [ '...path-to...bundle-source.js' ], 
    output: { 
    path: __dirname + '/public', 
    publicPath: 'http://localhost:8081/public/', 
    filename: 'bundle.js', 
    libraryTarget: 'umd', 
    } 
};