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

IT技术 reactjs coffeescript webpacker
2021-05-03 05:19:19

我在 Rails 应用程序 (5.2) 上添加 Reactjs，但我想使用 coffeescript 来编写它。我添加了 webpack 并安装了react和咖啡支持，两者似乎都有效，但是当我想同时使用两者时，我得到：

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 版。我可能会错过什么？

1个回答

我终于让它工作了，问题是（正如@caffeinated.tech 提到的）配置相当棘手。

使其工作所需的步骤：

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

  • 确保将 coffeescript 加载程序附加到加载程序（默认情况下已添加）：

// config/webpack/environment.js

const coffee =  require('./loaders/coffee')

// instead of environment.loaders.prepend('coffee', coffee)
environment.loaders.append('coffee', coffee)
/// ...

// 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 加载器不忽略咖啡文件（它不会在默认配置上处理咖啡文件）

// config/webpack/environment.js

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

之后它确实有效。

其它你可能感兴趣的问题
上一篇如何在 React App 完成加载之前显示整页加载器/微调器 下一篇使用jszip在前端下载大量文件