Question

我正在使用 browserify-rails + babelify 在react + rails项目中转换jsx。

我很困惑为什么// require('');需要components.js（这是反应的安装点），以便jsx转换工作。

如果删除评论行// require('');，我会收到“SyntaxError：Unexpected token import”

目前我没有任何线索，为什么一行评论会影响转换。我也很困惑，如果这是一个反应，或babelify，或浏览器，或browserify-rails，或rails资产管道的问题。

请参阅https://github.com/sidazhou/react_rails_skeleton/tree/v0.0.1了解完整代码

components.js

// require(''); // somehow this is necessary, why?! Otherwise we get: "SyntaxError: Unexpected token import"
import React from 'react';
import ReactDOM from 'react-dom';
import Widgets from './components/Widgets.jsx';

ReactDOM.render( <Widgets />, document.getElementById('react_component') );

的package.json

{
  "name": "react-sample",
  "dependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "browserify-incremental": "^3.0.1",
    "history": "^1.13.1",
    "material-ui": "^0.13.4",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-router": "^1.0.2",
    "react-tap-event-plugin": "^0.2.1"
  },
  "engines": {
    "node": ">= 0.10"
  }
}

application.rb中

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

Answer 1

browserify-rails有一个未解决的问题：

#124 transforms are only applied to files loaded with require()

我试图通过引用一些我认为相关的 cymen 帖子来概括该帖子（他是browserify-rails的作者）。

_{cymen 于2015年12月10日发表评论：}

尝试调试它的一个方法是在您的来源中添加// require或// module.exports的评论。这解决了吗？我们当然希望添加一个检测es6（导入等）的正确修复程序。

_{cymen 于2015年12月18日发表评论}

在重新阅读您的初始帖子之后，简单的解决方案是让application.js需要应用程序并启动它 - 只是不要使用ES6或其中的任何内容。那将会让你到达你想要的地方，而不会有太多麻烦。稍后，当您离开资产管道（理想情况下）时，您可以更好地控制编译，并且可以将其重构为主文件（如果这是您想要的）。但为什么要解决这么小的问题？

_{mockdeep ^{（他解决了这个问题）}于2015年12月18日发表评论：}

是的，我们正在那样做。我们此时在application.js中定义了几个全局变量。这只是一个令人惊讶的问题，如果你在Chrome或Firefox上进行测试，它不一定会浮出水面，因为它们都支持一系列ES6功能。

为什么我们想要摆脱资产管道呢？似乎它在预编译资产方面提供了一些非常可靠的价值。

_{cymen 于2015年12月18日发表评论：}

因为资产管道正在变成反模式。 browserify-rails存在的唯一原因是因为资产管道使JavaScript开发保持大约-5年左右的当前最佳实践。虽然browserify-rails可以工作，但在某个时刻，直接浏览浏览器或webpack会更容易。

所以我的观点是，browserify-rails最好从旧版JavaScript迁移到CommonJS，然后跳出资产管道。

但是每个人都可以自由地使用它，因为他们认为合适。将页面刷新连接到资产构建有一些好处。对于过去使用Rails的Ruby开发人员而言，这就是它的工作方式＆＃34;说得通。虽然使用Procfile，但开始观察资产并根据需要重新编译并不难开启webpack / browserify。所以我理解有各种各样的用例。

_{cymen 于2015年12月18日发表评论：}

我转换了雇主，我现在正在使用webpack（我喜欢 - 先前的工程师做出了这个选择并且工作正常，我认为浏览器也很好）。但我正在研究客户端Web应用程序，因此我们的后端通常是运行Sinatra的基于Ruby的API（使用NodeJS进行一些服务端呈现）。

我之前的雇主使用了browserify-rails一段时间，但我认为他们已经跳出了资产管道。我不确定（我还没有机会与那些仍然参与该项目的人详细谈论它。）

其中一个问题是运行browserify-rails的时间越来越长，尤其是低端MacBook（Airs，13岁）。使用browserify-rails 2.x，我认为如果我们能够解决直接使用Sprockets而不是使用Tilt作为中介的问题，我们有更好的机会保持高性能（就像我们在browserify-rails 1.x上所做的那样）。实际上，Sprockets缓存应该足够好以至于我们可以摆脱browserify-incremental（这是缓存browserify构建以试图保持性能提升 - 但现在使用2.x我们在Sprockets中缓存并在browserify中缓存 - 增量可能太复杂了。）

这是他对这个问题的最后评论（3个月前）。因此，您现有的解决方法是目前可用的最佳解决方案（直到有人在browserify-rails中实现ES6检测）。

babelify + browserify-rails + react，Uncaught SyntaxError：意外的令牌导入

1 个答案: