RequireJS + Babel + JSX答案

【问题标题】：RequireJS + Babel + JSXRequireJS + Babel + JSX
【发布时间】：2015-09-18 14:29:03
【问题描述】：

我正在尝试使用 Babel 调用浏览器内的 JSX 转换。

我正在使用以下内容在浏览器中加载 AMD JS 模块：

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

最终导入这个“ui”模块，它调用了一个函数来渲染 JSX。然而，这似乎并没有触发 Babel 的浏览器内 JSX 转换器。是否可以在 RequireJS 上下文中调用 Babel 的 JSX Transformer？

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
})

【问题讨论】：

标签： reactjs requirejs amd babeljs react-jsx

【解决方案1】：

啊，想通了。这里使用的方法https://github.com/podio/requirejs-react-jsx确实有效，但是RequireJS JSX转换只对导入的模块有效（main.js不能混入JSX）。

因此，组件模块应该简单地包装在一个函数原型中，该原型向 React.render 公开一个 render() 方法。

参考github页面上的例子。

【讨论】：

这不再有效。自 React 0.14 起，JSXTransformer 已被弃用