Как использовать React в Rails, используя кофе?

Я добавляю Reactjs в приложение Rails (5.2), но хочу использовать coffeescript для его написания. Я добавил веб-пакет и установил поддержку реакции и кофе, и оба, кажется, работают, но когда я хочу использовать оба, я получаю:

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 до версии 2.0, которая изначально должна поддерживать jsx. Что я мог упустить?


reactjs coffeescript webpacker
person eloyesp    schedule 05.05.2020    source источник
comment
Отвечает ли это на ваш вопрос? Как вы отображаете теги HTML в React с помощью Coffeescript?< /а>   -  person caffeinated.tech    schedule 07.05.2020
comment
@caffeinated.tech Это решение, но оно не использует jsx, который должен поддерживаться в coffeescript 2 (и часто используется с React, поэтому я бы использовал его, если это возможно).   -  person eloyesp    schedule 07.05.2020
comment
Можете ли вы поделиться своей конфигурацией веб-упаковщика? Вы правы - это должно быть возможно, но я думаю, что конфигурация довольно сложна.   -  person caffeinated.tech    schedule 08.05.2020

Ответы (1)


arrow_upward
1
arrow_downward

Я, наконец, заставил это работать, проблема в том, что (как упоминал @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)?$/

После этого он работает.

person eloyesp    schedule 08.05.2020