React JSX + Titaniumifier答案

【问题标题】：React JSX + TitaniumifierReact JSX + Titaniumifier
【发布时间】：2015-03-05 14:41:52
【问题描述】：

我们当前的基础架构依赖于 Titanium 作为原生架构。我正在尝试使用 https://www.npmjs.com/package/grunt-titaniumifier 将我的节点项目转换为 CommonJS。但是，它在 JSX 上失败了：

return (
  <div className="App">
    <EnergyChart width="1000" data={JSONData.data} customerID={customerID} lineColor='#FF0' height="500" marginTop="20" marginLeft="50" marginBottom="20" marginRight="20" />
  </div>
);

Browserify 工作正常，因为它使用如下变换：

browserify: {


  app: {
    src: 'app/App.js', dest: 'dist/bundle.js',
    options: {
        transform: ['grunt-less-browserify', require('grunt-react').browserify],
    }
  },

}

对于钛化剂，我有以下几点：

"titaniumifier": {
  "module": {
    files: {
      // The package is in "." and the zipfile will be written in "."
      ".": "."

    },

  },
  options: {
      transform: [ require('grunt-react').browserify],
  }
}

但是运行grunt titaniumifier:module 会返回

致命错误：解析文件 /Users/rduckworth/Projects/titanium-d3/app/App.js：意外令牌 (23:6)

就是上面的 JSX 代码。

有没有办法让 Titaniumifier 像 browserify 一样编译 JSX？

【问题讨论】：

标签： javascript reactjs gruntjs react-jsx grunt-browserify

【解决方案1】：

@rickyduck titaniumifier 的创建者和维护者在这里。我很抱歉我错过了这个问题。

您可以使用 the same syntax I show on the Wiki 为您的应用程序启用 Babel 转译为您的包/模块启用它。

长话短说：

添加 Babel 作为依赖项
使用 package.json 的 titaniumifier.transforms 对象

一个例子：

{
  "devDependencies": { ".." },
  "titaniumifier": {
    "transforms": {
      "babel": { "presets": [ "es2015" ] }
    }
  }
}

【讨论】：