如何在使用咖啡的Rails中使用React？

本文介绍了如何在使用咖啡的Rails中使用React？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在Rails应用程序（5.2）上添加Reactjs，但我想使用coffeescript编写它。我已经添加了webpack并安装了react和coffee支持，并且两者似乎都可以正常工作，但是当我同时使用它们时，我会得到：

I'm adding Reactjs on a Rails application (5.2), but I want to use coffeescript to write it. I've added webpack and installed react and coffee support, and both seems to work, but when I want to use both I get:

Module parse failed: Unexpected token (10:9) File was processed with these loaders: * ./node_modules/coffee-loader/index.js You may need an additional loader to handle the result of these loaders. | | Foo = props(() => { > return <div>Hello {props.name}!</div>; | }); |

我还将coffeescript更新为应该本地支持jsx的2.0版本。我可能会缺少什么？

I also updated coffeescript to the version 2.0 that should support jsx natively. What could I be missing?

推荐答案

我终于使它起作用了，问题在于（如@ caffeinated.tech所述） ）的配置非常棘手。

I've finally made it work, the problem is that (as @caffeinated.tech mentioned) the configuration is rather tricky.

使其工作所需的步骤：

• 将coffeescript版本2添加到依赖项中（默认情况下，webpacker安装版本1）。

• Add coffeescript version 2 to the dependencies (by default webpacker installs the version 1).

确保将coffeescript加载程序附加到加载程序（默认情况下是预先设置的）：

Make sure coffeescript loader is appended to the loader (it is prepended by default):

// config/webpack/environment.js const coffee = require('./loaders/coffee') // instead of environment.loaders.prepend('coffee', coffee) environment.loaders.append('coffee', coffee) /// ...

• 并配置要装载的咖啡装载器：
• And configure coffee-loader to transpile:
// config/webpack/loaders/coffee.js module.exports = { test: /\.coffee(\.erb)?$/, use: [{ loader: 'coffee-loader', options: { transpile: {} // it seems that transpile options can be used here, // but I couldn't find what to use } }] }

更新

在此问题，建议不要将babel loader配置为不忽略咖啡文件（它不处理咖啡文件使用默认配置）

Update

Instead of configuring coffee to transpile (as mentioned before), in this issue it does recommend configuring babel loader to not ignore coffee files (it does not process coffee files on the default config)

// config/webpack/environment.js // Make babel process coffee files environment.loaders.get('babel').test = /\.(js|jsx|mjs|ts|tsx|coffee)?(\.erb)?$/

此后它确实起作用。