RequireJS + Babel + JSX

Question

Sto tentando di richiamare le trasformazioni JSX nel browser utilizzando Babel.

Sto caricando un modulo AMD JS nel browser utilizzando il seguente:

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

che alla fine importa questo modulo "ui", che ha chiama una funzione per rendere JSX. Tuttavia, questo non sembra attivare il trasformatore JSX nel browser Babel. È persino possibile chiamare Babel's JSX Transformer all'interno di un contesto RequireJS?

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, ho capito. Il metodo utilizzato qui https://github.com/podio/requirejs-react-jsx funziona, ma la trasformazione RequireJS JSX funziona solo sul modulo importato (main.js non può contenere JSX).

Pertanto, il modulo Componente deve semplicemente essere racchiuso in un prototipo di funzione che espone un metodo render() a React.render.

Fare riferimento all'esempio nella pagina Github.