Browserify：import react module

私は最近反応を使用し始めました。私は自分のプロジェクトの第三者コンポーネントに含めたいと思います。私は（DIRノード・モジュールが作成された）NPMと私のプロジェクトでそれをインストールし、このように私の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>

マイ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)

がインストールされている：

ベルベリフ
モーメント
反応
反応-ビッグカレンダー
反応-DOM

だから私の質問です：どのように私は、importステートメントを使用してindex.jsから私のbudle.jsを作成することができますか？

出典

2016-06-27 Ernest Fish Moro

出荷時には、BabelはReact JSXの構文を処理しません。あなたは、通常のJSにこれらを変換するために、JSX presetを使用するようにバベルを指示する必要があり

呼び出し：

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

その後.babelrcという名前のファイルを作成します（reference）以下の内容

{ 
    "presets": ["react"] 
}

出典

2016-06-27 15:06:29

でいただき、ありがとうございます今度は最初のエラー（ 'ParseError： 'import'と{...}'）を与えて、ルートプロジェクトに 'package.json'というファイルを追加しようとしました： ' { " browserify "：{ "変換"：[ "babelify" ] } } ' しかし、それは私に同じエラーを与えた！多分私は '.babelrc'に何か他のものを追加しなければなりませんか？ –

ああ、 'presets'を' ["es2015"、 "react"] 'に設定してみてください。 –

さて、これはうまくいくようです！しかし、それは私にこのエラーを与えた： 'エラー： 'C：\ Users \ ernest \ PhpstormProjects \ reactcalendar''から' react-big-calendar 'モジュールを見つけることができませんいくつかのアイデア？ –

Browserify：import react module

答えて

関連する問題