RequireJS + Babel + JSX

Question

Ich versuche, in-Browser-JSX-Transformationen mithilfe von Babel aufzurufen.

Ich bin ein AMD JS-Modul in den Browser geladen folgendes mit:

require(["nbextensions/ht"] function(ext){}); 

die schließlich importiert dieses „ui“ Modul, das eine Funktion hat, ruft JSX zu machen. Dies scheint jedoch nicht Babel's JSX-Transformer im Browser auszulösen. Ist es sogar möglich, Babel's JSX Transformer innerhalb eines RequireJS-Kontexts aufzurufen?

var BOWER = '/nbextensions/ht/bower_components' 
var COMPONENTS = '/nbextensions/ht/components' 
var NODE_MODULES = '/nbextensions/ht/node_modules' 

requirejs.config({ 
    paths: { 
    es6: NODE_MODULES + "/requirejs-babel/es6", 
    babel: NODE_MODULES + "/requirejs-babel/babel-5.8.22.min" 
    } 
}) 

define([ 
    BOWER + '/react/react.min.js', 
    "es6!" + COMPONENTS + "/App.jsx" 
],function(React, App){ 
    console.log("Loaded React v" + React.version) 

    var ui = {} 
    ui.render = function() { 
    React.render(<App/>, document.getElementById("ht_main")) 
    } 

    return ui 
}) 

Answer 1

Ah, habe es herausgefunden. Die hier verwendete Methode https://github.com/podio/requirejs-react-jsx funktioniert, aber die JSX-Transformation RequireJS funktioniert nur auf dem importierten Modul (main.js kann kein JSX enthalten).

Daher sollte das Komponentenmodul einfach in einen Funktionsprototyp eingebunden werden, der eine render() -Methode für React.render verfügbar macht.

Siehe das Beispiel auf der GitHub-Seite.