ruby-on-rails - 使用 react-rails es6 获取意外 token

Question

Rails 5.0.0.1
Ruby 2.3.1

我原以为这会是一个礼物问题，但话又说回来，它适用于创建 the tutorial Im following 的人连同this .所以，没什么特别的:

Application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= cable
//= require_self
//= require react_ujs

window.$ = window.jQuery = global.$ = require('jquery');
var React = window.React = global.React = require('react');
var ReactDOM = window.ReactDOM = global.ReactDOM = require('react-dom');

require('./components');

Components.js

require( 'babel-polyfill' );
// Manually add components to window and global
// so that react_ujs and react-server can find them and render them.
window.Home = global.Home = require("./components/Home.js").default
// same issue if use *.es6.jsx

Home.js(或 es6.jsx)

import React from 'react';
import ReactDOM from 'react-dom';

class Home extends React.Component {
  render() {
    return (
      <div className="form-control">
        Home baby
      </div>
    )
  }
}
export default Home;

gem 文件

gem "browserify-rails"
gem 'react-rails

config/application.rb

# Configure Browserify to use babelify to compile ES6
config.browserify_rails.commandline_options = "-t [ babelify --presets [ es2015 ] ]"

unless Rails.env.production?
    # Work around sprockets+teaspoon mismatch:
    Rails.application.config.assets.precompile += %w(spec_helper.js)

    # Make sure Browserify is triggered when
    # asked to serve javascript spec files
    config.browserify_rails.paths << lambda { |p|
        p.start_with?(Rails.root.join("spec/javascripts").to_s)
    }
end

npm

npm install browserify browserify-incremental babelify babel-preset-es2015 --save

意外标记指的是第一个 <div> ， 为什么？

Answer 1

JSX 语法未被编译，可能是因为您需要将 react babel 预设添加到您的 browserify 配置中。

安装包:

npm install --save-dev babel-preset-react

配置/应用程序.rb

config.browserify_rails.commandline_options = "-t [ babelify --presets [ es2015 react ] ]"