Browserify：导入React模块

Question

I started using react recently and i'd like to include in my project third party component. 我最近开始使用react，并且希望在我的项目中包含第三方组件。 I installed it in my project with npm (dir node-modules was created), my index.html look like this: 我使用npm（已创建目录节点模块）将其安装在我的项目中，我的index.html如下所示：

<!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 look like this: 我的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'));

I tried the command: 我尝试了命令：

browserify index.js -o bundle.js

but it gave me this error: 但这给了我这个错误：

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 I tried to install babelify and tried this commad: 所以我尝试安装babelify并尝试了这个命令：

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

but it gave me this another error: 但这给了我另一个错误：

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 my node-modules dir is installed: 在我的node-modules目录中安装了：

babelify Babelify
moment 时刻
react 反应
react-big-calendar 大日历反应
react-dom 反应域

So my question is: How can i create my budle.js from index.js using import statement? 所以我的问题是：如何使用import语句从index.js创建budle.js？

Answer 1

Out of the box, Babel does not handle the React JSX syntax. 开箱即用，Babel不处理React JSX语法。

You need to tell Babel to use a JSX preset , to translate these into normal JS calls: 您需要告诉Babel使用JSX预设，将其转换为普通的JS调用：

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

Then create a file named .babelrc ( reference ) with the following contents 然后创建一个名为.babelrc （参考）的文件，其中包含以下内容

{
  "presets": ["react"]
}

Browserify：导入React模块

问题描述

1 个解决方案

解决方案1
0 2016-06-27 15:06:29

Browserify：导入React模块

问题描述

1 个解决方案

解决方案1 0 2016-06-27 15:06:29

解决方案1
0 2016-06-27 15:06:29