Webpack: Expose eine Variable zu Skript-Tags

Question

Ich struggeling, um Webpack bundle.js die ReactDOM (und wahrscheinlich andere Variablen), die Tags zu machen ... Gibt es einen ordentlichen Trick, dies zu tun?

Ich habe das mit jquery gemacht, aber ist das wirklich der Weg zu gehen? :

$ = require('jquery'); 
window.jQuery = $; 
window.$ = $; 

Answer 1

Dies ist eine saubere Art und Weise, was Sie tun mögen:

das Script-Tags für ReactDOM enthalten, die an dem CDN-Links (oder wo auch immer Sie ReactDOM von erhalten mag) auf der Ausgabe HTML-Seite: <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

die externals Eigenschaft in Ihrem webpack config webpack jetzt lassen, dass ReactDOM von einer externen Quelle kommen, anstatt etwas, das webpack im Projektverzeichnis finden. In diesem Fall in Ihrer webpack.config.js:

module.exports = { 
    // other configs 
    externals: { 
    'react-dom': 'ReactDOM' 
    } 
} 

Der Name auf der linken Seite des Dickdarms ist, wie Sie ReactDOM in Ihrem Code verweisen. Die rechte Spalte ist die globale Variable, die das Paket an window anfügt.

In Ihrem Code in bundle.js, import ReactDOM wie folgt:

import * as ReactDOM from 'react-dom' 

In Ihrem Code außerhalb des Bündels, verwenden ReactDOM als globale Variable

ReactDOM.render(/*some component */) 

Sie diesen Ansatz auf jede UMD verallgemeinern Pakete.