Browserify: import react module

Я начал использовать реакцию в последнее время, и я хотел бы включить в свой проект сторонний компонент. Я установил его в моем проекте с НПМ (реж узлов-модулей был создан), мой index.html выглядеть следующим образом:Browserify: import react module

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>React Calendar</title> 
    <script src="bundle.js" type="text/javascript"></script> 
</head> 
<body> 
    <div id="content"></div> 
</body> 
</html>

My index.js выглядеть следующим образом:

import BigCalendar from 'react-big-calendar'; 
import moment from 'moment'; 

BigCalendar.momentLocalizer(moment); 

ReactDOM.render(<BigCalendar 
    events={myEventsList} 
    startAccessor='startDate' 
    endAccessor='endDate' 
/>, document.getElementById('content'));

Я попытался команда:

browserify index.js -o bundle.js

, но он дал мне эту ошибку:

C:\Users\ernest\PhpstormProjects\reactcalendar\index.js:1 
import BigCalendar from 'react-big-calendar'; 
^ 
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

поэтому я попытался установить babelify и попробовал этот commad:

browserify -t babelify index.js -o bundle.js

, но он дал мне эту другую ошибку:

SyntaxError: C:/Users/ernest/PhpstormProjects/reactcalendar/index.js: Unexpected token (8:16) 
    6 | BigCalendar.momentLocalizer(moment); // or globalizeLocalizer 
    7 | 
> 8 | ReactDOM.render(<BigCalendar 
    |    ^
    9 |  events={myEventsList} 
    10 |  startAccessor='startDate' 
    11 |  endAccessor='endDate' 
    at Parser.pp.raise (C:\Users\ernest\PhpstormProjects\reactcalendar\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\location.js:22:13) 
    at Parser.pp.unexpected (C:\Users\ernest\PhpstormProjects\reactcalendar\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\util.js:89:8) 
    at Parser.pp.parseExprAtom (C:\Users\ernest\PhpstormProjects\reactcalendar\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:522:12) 
    at Parser.pp.parseExprSubscripts (C:\Users\ernest\PhpstormProjects\reactcalendar\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:277:19) 
    at Parser.pp.parseMaybeUnary (C:\Users\ernest\PhpstormProjects\reactcalendar\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:257:19) 
    at Parser.pp.parseExprOps (C:\Users\ernest\PhpstormProjects\reactcalendar\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:188:19) 
    at Parser.pp.parseMaybeConditional (C:\Users\ernest\PhpstormProjects\reactcalendar\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:165:19) 
    at Parser.pp.parseMaybeAssign (C:\Users\ernest\PhpstormProjects\reactcalendar\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:128:19) 
    at Parser.pp.parseExprListItem (C:\Users\ernest\PhpstormProjects\reactcalendar\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:1046:16) 
    at Parser.pp.parseCallExpressionArguments (C:\Users\ernest\PhpstormProjects\reactcalendar\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:353:20)

В моем узле-модулей дир установлен:

babelify
момент
реакция
реагируют-большой календарь
реагируют-дом

Так что мой вопрос: Как я могу создать свой budle.js из index.js, используя оператор импорта?

источник

2016-06-27 Ernest Fish Moro

Из коробки, Бабель не обрабатывает синтаксис React JSX.

Вы должны сказать Бабеля использовать JSX preset, чтобы перевести их в обычный JS звонки:

npm install --save-dev babel-cli babel-preset-react

Затем создайте файл с именем .babelrc (reference) со следующим содержанием

{ 
    "presets": ["react"] 
}

источник

2016-06-27 15:06:29

благодарю вас но теперь он снова дал мне первую ошибку ('ParseError: 'import' и {...}'), я попытался добавить файл 'package.json' в мой корневой проект со следующим содержимым: ' { " браунировать ": { "transform": [ "babelify" ] } } ' , но это дало мне ту же ошибку! Может быть, мне нужно добавить что-то еще на '.babelrc'? –

О, попробуйте настроить 'presets' на' ["es2015", "реагировать"] '? –

Хорошо, теперь это работает! Но это дало мне эту ошибку: 'Ошибка: не удается найти модуль« response-big-calendar »из« C: \ Users \ ernest \ PhpstormProjects \ reactcalendar'' Некоторые идеи? –

Browserify: import react module

ответ

Смежные вопросы