Question

我最近开始使用react，我想在我的项目中加入第三方组件。我用npm（dir node-modules创建）在我的项目中安装了它，我的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>

我的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)

在我的node-modules中安装了dir：

babelify
矩
反应
反应-大日历
反应-DOM

所以我的问题是：如何使用import语句从index.js创建我的budle.js？

Answer 1

开箱即用，Babel不处理React JSX语法。

你需要告诉Babel使用JSX preset，将它们转换成普通的JS调用：

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

然后使用以下内容创建名为.babelrc（reference）的文件

{
  "presets": ["react"]
}

Browserify：导入反应模块

1 个答案: