Browserify：导入反应模块答案

【问题标题】：Browserify: import react moduleBrowserify：导入反应模块
【发布时间】：2016-06-27 14:04:26
【问题描述】：

我最近开始使用 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 并尝试了这个逗号：

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 目录中安装：

babelify
时刻
反应
反应大日历
反应域

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

【问题讨论】：

标签： reactjs browserify babeljs

【解决方案1】：

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

你需要告诉 Babel 使用 JSX preset，将这些转换为正常的 JS 调用：

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

然后创建一个名为.babelrc（reference）的文件，内容如下

{
  "presets": ["react"]
}

【讨论】：

谢谢，但现在它又给了我第一个错误 (ParseError: 'import' and {...})，我尝试将文件 package.json 添加到我的根项目中，内容如下：{ "browserify": { "transform": [ "babelify" ] } } 但它给了我同样的错误！也许我必须在.babelrc 上添加其他内容？
哦，试试把presets设置成["es2015", "react"]？
好的，现在它似乎工作了！但它给了我这个错误：Error: Cannot find module 'react-big-calendar' from 'C:\Users\ernest\PhpstormProjects\reactcalendar'Some idea?
你的 package.json 中有 react-big-calendar 吗？是否安装在node_modules 中？如果两者都是真的，那么它一定是 browserify 问题......最好使用 Webpack 或 Brunch 之类的解决方案，一般来说。
package.json 看起来像这样：{ "main": "index.js", "dependencies": { "babel-cli": "^6.10.1", "babel-core": "^6.10.4", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.11.0", "babelify": "^7.3.0", "moment": "^2.13.0", "react": "^15.1.0", "file-loader": "^0.9.0", "react-big-calendar": "^0.10.2", "webpack": "^1.13.1", "react-dom": "^15.1.0" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, } react-big-calendar 已安装。