Ich versuche, React + ReactDOM über RequireJS in einer minimierten Datei zu verwenden, die als eigenständige Bibliothek fungiert.Verwenden von React-dom mit RequireJS in einer minimierten Datei
Ich bin an dem Punkt angekommen, an dem ich React (gebündelt in der minimierten Datei) verwenden kann, aber beim Versuch, ReactDOM zu verwenden, bricht alles ab, die mögliche Ursache, die ich bisher gefunden habe, ist das beim Laden von "require-dom "require versucht, eine Datei" react-dom "zu importieren, anstatt den Code aus der minimierten Datei zu laden. (Was eigentlich re-dom enthält).
Eigentlich benutze ich grunt zum Vorkompilieren aller benötigten Dateien. Hier ist mein Grunzen requirejs Konfiguration:
requirejs: {
build: {
options: {
baseUrl: './build/',
paths: {
'jquery': '../bower_components/jquery/dist/jquery.min',
'react': '../bower_components/react/react.min',
'react-dom': '../bower_components/react/react-dom.min'
},
include: ['main'],
out: 'dist/library.min.js',
optimize: 'uglify2'
}
}
}
main.js ist wie folgt:
define(['jquery', 'react', 'react-dom'], function($, React, ReactDOM) {
return {
react: React,
reactDOM: ReactDOM,
}
});
Nachdem alle den Code mit der obigen Konfiguration Kompilieren ich es in einer HTML-Datei enthalten wie folgt:
<html>
<head>
<script src="../bower_components/requirejs/require.js"></script>
<script src="index.js"></script>
</head>
<body></body>
</html>
Index.js ist eine requirejs Datei wie folgt:
requirejs.config({
baseUrl: 'src',
paths: {
mylib: 'lib/dist/library.min.js'
}
});
require(['mylib'], function(mylib) {
console.log(mylib);
});
Der Fehler Ich erhalte bei dem obigen Ausführung von Code ist die folgende:
require.js:1958 GET file:///D:/code/example/user/src/src/react-dom.js net::ERR_FILE_NOT_FOUND
req.load @ require.js:1958
load @ require.js:1682load @ require.js:832
fetch @ require.js:822check @ require.js:854
enable @ require.js:1173
enable @ require.js:1554
(anonymous function) @ require.js:1158
(anonymous function) @ require.js:134
each @ require.js:59enable @ require.js:1110
init @ require.js:786(anonymous function) @ require.js:1457
require.js:168 Uncaught Error: Script error for "react-dom"(…)
Wenn ich glatt reagieren-dom aller Last zu entfernen.
Ich habe bisher mehrere Dinge ausprobiert, als Reag als Shim zu importieren, also reac-dom erkennt die globale React var, aber das hat auch nicht funktioniert.
Jede Hilfe wird geschätzt, danke im Voraus.
Update:Github repo with example code
Update 2: Nach einer gewissen Zeit der Fehlersuche auf dem reagieren-dom lib und die minimierte Skript Ich fand heraus, dass das Hauptverfahren vor dem Aufruf ausgeführt wird „define (‘ react-dom ') "im minimierten Skript, so entwirrt das Problem," wie man das Hauptscript warten lässt, bis der Code, der' react-dom 'definiert, ausgeführt wird ".
Haben Sie darüber nachgedacht, das minimale Beispiel über GitHub zu teilen? – prosti
Danke für den Rat, ich werde ein minimales Beispiel so schnell wie möglich vorbereiten. –
Beispiel Github Repo hinzugefügt. –