Browserify-rails 无法加载包含 JSX 的 js 文件答案

【问题标题】：Browserify-rails can't load js-files containing JSXBrowserify-rails 无法加载包含 JSX 的 js 文件
【发布时间】：2016-08-27 19:37:51
【问题描述】：

我添加了 browserify-rails，以便我可以将 React 包含在我的 Rails 应用程序中。我能够导入和导出模块。例如。我的todos.js 执行从hello_world.js 导出的函数。但是加载包括 JSX 在内的文件会破坏一切。

我错过了什么？ :-( 整个 Rails 应用程序是 available at Github。请查看 browserify-rails 分支。

application.rb

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

app/assets/javascripts/todos.js

import Hello from "hello_world";
let hello = new Hello();
console.log( "GREET: " + hello.greet() );

// Everything breaks if I add the section below. 
// Why isn't the JSX code transpiled correct? 
// I do have babel in my package.json.
ReactDOM.render(
    <h1>Hello, world!</h1>h1>,
    document.getElementById('example')
);

app/assets/javascripts/hello_world.js

class Hello {
  greet() {
    return "Hello world!";
 }
}

export default Hello;

package.json

{
  "name": "something",
  "dependencies": {
    "babel-preset-react": "^6.11.1",
    "browserify": "~10.2.4",
    "browserify-incremental": "^3.0.1",
    "react": "^15.3.1",
    "react-dom": "^15.3.1"
  },
  "license": "MIT",
  "engines": {
    "node": ">= 0.10"
  }
}

【问题讨论】：

标签： javascript ruby-on-rails browserify-rails

【解决方案1】：

你也应该安装babel-presets-es2015。只需在package.json 中添加最新版本即可。

【讨论】：