Browserify: Import-Modul

Ich habe angefangen, reagieren vor kurzem und ich möchte in meinem Projekt Drittanbieter-Komponente enthalten. Ich installierte es in meinem Projekt mit npm (dir Knoten-Module erstellt wurde), meine index.html sieht wie folgt aus:Browserify: Import-Modul

<!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>

Meine index.js wie folgt aussehen:

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'));

Ich habe versucht, die Befehl:

browserify index.js -o bundle.js

aber es gab mir diesen Fehler:

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

so habe ich versucht, babelify und versucht, diese commad zu installieren:

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

aber es gab mir diesen einen weiteren Fehler:

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)

In meinem Knoten-Module dir installiert ist:

babelify
moment
reagieren
reagieren-big-Kalender
reagieren-dom

Also meine Frage ist: Wie mache ich meine budle.js aus index.js Import-Anweisung?

Quelle

2016-06-27 Ernest Fish Moro

Standardmäßig behandelt Babel die React JSX-Syntax nicht.

Sie müssen Babel anweisen, eine JSX preset, verwenden diese in normale JS übersetzen ruft:

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

Dann erstellen Sie eine Datei mit dem Namen .babelrc (reference) mit folgendem Inhalt

{ 
    "presets": ["react"] 
}

Quelle

2016-06-27 15:06:29

Danke aber jetzt gab es mir den ersten Fehler wieder ('ParseError: 'import' und {...}'), ich habe versucht, eine Datei 'package.json' zu meinem Root-Projekt mit folgendem Inhalt hinzuzufügen: ' { ' browserifizieren ": { "transform": [ "babelify" ] } } ' aber es gab mir den gleichen Fehler! Vielleicht muss ich etwas anderes auf der '.babelrc' hinzufügen? –

Oh, versuchen Sie 'Presets' zu' ["es2015", "reagieren"] '? –

Ok, jetzt scheint es zu funktionieren! Aber es gab mir diesen Fehler: 'Fehler: Modul 'react-big-calendar' kann nicht gefunden werden von 'C: \ Users \ ernest \ PhpstormProjects \ reactcalendar'' Einige Ideen? –

Antwort

Verwandte Themen