Webpackバンドルからオブジェクトを公開し、コンパイルされたバンドルに外部ライブラリを挿入する方法はありますか？

Question

ショートバージョン

TL; DRは、私はWebPACKのバンドルから任意のオブジェクトや関数を公開できるようにしたい、私は別の（独立と無関係）バンドル（Bundle1）で使用できる、（のはBundle2それを呼びましょう）。

たとえば、Bundle2はBundle1のウィジェットとして機能するReactアプリケーションです。 Bundle2は、Bundle1が使用できるように、Reactコンポーネント、アクション、レデューサーを何らかの形で公開します（レデューサーの組み合わせ、Bundle2コンポーネントのレンダリングなど）。

また、Bundle2には、Bundle1に既に含まれているライブラリを使用してスペースを節約したいと考えています。

は私がバンドルからLIBSを除外するためにWebPACKのoptions.externalsを使用することができます知っている、と私はそれが動作するようになりました。しかし、外部の人物が地球規模の対象になることを期待しています。私は、Bundle1からBundle2への依存関係を、何らかの形で、小道具を通過するように注入できるようにしたい。 Bundle2がReactを使用できるようにBundle1にwindow.React = require('react')を設定する必要はありません。

EDIT：清澄ポイント...私のユースケースは、私は、ユーザーが店舗またはそのような何かからウィジェットを追加できるようにしたいです。何千ものウィジェットが存在する可能性があるので、（Webpackのチャンクやコード分割機能を使用している場合でも）コンパイル時にメインバンドルに含められるように（ユーザが生成できる）ウィジェットはスケーラブルか、 。また、基本的に任意のネイティブコードを実行できるので、他の人のコードをWebpackで実行するのは危険です。代わりに、私は他の人のウィジェットを私のサーバー上のどこかに置いて、それらをインストールするときにウィジェットコードを非対称的にダッシュボードにロードします。

ロングバージョン

のは、私は、次のWebPACKのバンドルがあるとしましょう：

• dashboard.bundle.js、メインアプリケーションバンドルを。これはReduxを使ったReactアプリです。
• clockWidget.bundle.jsは、Clock Reactコンポーネントを定義し、その状態に基づいてReduxを使用して自身を更新します。したがって、ルートコンポーネント、レデューサー、およびいくつかのアクションがあります。実行時に

、clockWidget.bundle.jsは種類のこのようなrequire.jsを使用してdashboard.bundle.jsにasyncronouslyロードされます。

// Inside dashboard.bundle.js 
requirejs(['clockWidget.bundle.js'], (widgetFunc) => { 
    // I want to be able to do this: 
    const widget = widgetFunc(); 
    const { actions, reducer, Component } = widget; 

// Where: 
// Component - is a React component I can render either server-side or client-side inside the dashboard bundle. 
// actions & reducer - are Redux actions and reducers 
}); 

基本的には、clockWidgetはasyncronouslyに引っ張られますとによって与えられたComponentを使用してdashboard内のどこかにレンダリングclockWidgetバンドル。

clockWidgetバンドルのサイズを減らすために、私はdashboard.bundle.jsはすでにそれを持っているため、バンドルからReactを除外するのWebPACKのoptions.externals機能を使用します。

私はこのような何かをできるようにしたい：

// inside dashboard.bundle.js: 

import React from 'react'; 
//... 
requirejs(['clockWidget.bundle.js'], (widgetFunc) => { 
    // Give the clockWidget bundle access to React: 
    const widget = widgetFunc({ React })(); 
    // Then calling that gives me all the stuff I need, like before: 
    const { actions, reducer, Component } = widget; 
    // ...rendering the component, etc... 
}); 

しかし、私は非常にそれを行う方法を見つけ出すことはできません。私はこのような何かを試しました：

私はこの大胆に近づく方法についての任意のインプットまたは洞察力を大いに感謝します。ありがとう:)

Answer 1

は、念のためにあなたはまだ解決策を探している：私は基本的に同じ問題を抱えていたし、ウィジェットバンドルの代わりに、そのモジュールを含めるのはなぜSolution: load independently compiled Webpack 2 bundles dynamically