JSX似乎並不transpile正確

我使用的反應 - 軌道的寶石在Rails（4.2.7）項目。這是我給我的默認的Gemfile做出的唯一修改：JSX似乎並不transpile正確

class Foo extends React.Component { 
    render() { 
    return (<h1>hello</h1>) 
    } 
}

這工作得很好，但是當我：我已經使用ES6語法在.jsx文件中定義的組件

gem 'react-rails'

嘗試導入一個js模塊，我得到一個錯誤：

import ReactTransitionGroup from 'react-addons-transition-group' 
class Foo extends React.Component { 
    render() { 
    return (<h1>hello</h1>) 
    } 
}

foo.es6.self-69f3a42….js?body=1:11 Uncaught ReferenceError: require is not defined

在我看來，如果我不transpiling的JSX correctl那麼我會在第一種情況下出現錯誤，但我不是。我一整天都在使用jsx，沒有問題，直到我嘗試使用import。

我試着添加以下到我的Gemfile：

gem 'sprockets-es6' 
gem 'babel-transpiler'

我試圖增加這配置/環境/ development.rb：

config.react.jsx_transformer_class = React::JSX::BabelTransformer

我已經試過發電採用滑軌的成分反應成分產生與--es6標誌：

rails g react:component Foo --es6

我缺少什麼？

來源

2017-04-18 Fred Willmore

其實你的代碼確實得到由巴貝爾正確transpiled。問題出在您導入時。你需要使用諸如https://github.com/rstacruz/npm-pipeline-rails之類的東西來獲取npm模塊到資產管道中，然後將其與最終的js捆綁在一起。 – Panther

因此，這裏是我如何解決我的問題：因爲我使用的是「反應-Rails的寶石，該插件是通過配置選項可用 - 我增加了以下內容的config/application.rb中：

config.react.addons = true

然後在我.jsx文件，而不是import，這是我曾經有機會獲得ReactTransitionGroup語法：

var ReactTransitionGroup = React.addons.ReactTransitionGroup

我還是不明白，但也許有一天我會的，爲什麼import聲明transpiles至require h是未定義的，以及如何通過定義require以外的任何東西來解決，或者轉化爲定義的東西。

來源

2017-04-20 06:56:45

JSX似乎並不transpile正確

回答

相關問題