Gulp + React + es2015 + babel?

Question

[Вячеслав Лебедев]

Добрый вечер!
Разбираюсь со связкой: Gulp + React + es2015 + babel.
Конфиг гулпа простой - прогоняю все jsx через babel с пресетом в .babrlrc:
"presets": ["es2015", "react"]
И попал на ошибку в браузере:
require is not defined
Помогите разобраться. Хочу писать вот такие штуки и чтобы работали в браузере :)

import React from 'react';
import ReactDom from 'react-dom';

class CommentBox extends React.Component {
  render() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
}

ReactDOM.render(
  <CommentBox />,
  document.getElementById('app')
);

Где и что не так я делаю?
Спасибо!

Comments

[copal]

у Вас походу нет плагина для компиляции хоть в какие-нибудь модули... У меня вот так выглядит

settings: {
    sourceMaps: true,
    presets: ["es2015", "stage-1", "react"],
    plugins: [
        "transform-es2015-modules-commonjs"
    ]
},

[copal]

Вас вот эта строчка должна заинтересовать "transform-es2015-modules-commonjs"

[Вячеслав Лебедев]

copal: Поставил babel-plugin-transform-es2015-modules-commonjs, дописал в .babelrc "plugins": ["transform-es2015-modules-commonjs"] и все равно не работает :( сборка js не изменилась.

[copal]

Вячеслав Лебедев: та же ошибка?

[Вячеслав Лебедев]

copal: да. require нет. собранный js не изменился

[copal]

Вячеслав Лебедев: при компиляции модули не нужны, но если ошибка в браузере, то значит стоит обратить внимание на Ваш загрузчик модулей. Модули же не могут сами грузится и запускаться...

[Вячеслав Лебедев]

copal: так как мне быть? Смотреть в сторону webpack? Там такое из коробки присутствует. Или как то можно обойтись gulp?

[copal]

Вячеслав Лебедев: я sysytem.js использую при разработке, так как он побыстрее webpack. Но последний использую для сборки, так как он наиболее полно собирает проекты и с ними потом может любой работать.

Answer 1

[Вячеслав Лебедев]

Заработало. Только без import'ов.
До этого react.js был в отдельном файле.
Все объединил в один и заработало.
Не хватало babel-plugin-transform-es2015-modules-commonjs