ES6 与 React 和 Browserify答案

【问题标题】：ES6 with React and BrowserifyES6 与 React 和 Browserify
【发布时间】：2015-11-24 05:56:15
【问题描述】：

所以我尝试将 ES6 的 import 语句与 React 和 browserify 一起使用来创建一个 Web 应用程序。我遇到了一些障碍，这是第一个。

这是我的 index.js：

import React from 'react';
import ReactDOM from 'react-dom';

var Start = React.createClass({
  getText: function() {
    return 'hi'
  },

  render: function() {
    return (
      <h1 className="jumbotron">{this.getText()}</h1>
    );
  }
});

ReactDOM.render(
  <Start />,
  document.getElementById('example')
)

这是我的 index.html：

<html>
  <head>
    <link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css">
  </head>
  <body>
    <div id="example"></div>
    <script src="../build/bundle.js"></script>
  </body>
</html>

这是我的节点依赖项：

  "dependencies": {
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "babelify": "^7.2.0",
    "react": "^0.14.3",
    "react-dom": "^0.14.3"
  }

这是我用来尝试使用 watchify 转译我的代码的命令：

watchify -t [ babelify --presets [ react ] ] index.js -o ../build/bundle.js

这是我得到的错误：

/Users/httpnick/react/csgo-cache/public/js/index.js:1
import React from 'react';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

我整个周末都在为此奋斗，不知道该怎么办。如果我删除导入并只使用require()s 它可以工作，但导入只是不喜欢为我工作。任何解决此问题的帮助或我可以检查的东西将不胜感激。我真的很想使用 React 进入 ES6。

【问题讨论】：

标签： javascript node.js reactjs ecmascript-6 browserify

【解决方案1】：

我认为您的项目结构中缺少一个 .babelrc 文件，该文件可能包含：

{
  "presets": ["es2015"],
  "plugins": ["transform-react-jsx"]
}

希望这会有所帮助。

编辑：

当您使用 CLI 时，您可以像这样传递缺少的 es2015：

watchify -t [ babelify --presets [ es2015 react ] ] index.js -o ../build/bundle.js

（请注意上面一行中的附加 es2015，这是与您的代码的唯一区别）。

【讨论】：

他将--presets 传递给了推荐人，他刚刚离开了es2015，只做了react。
您好，感谢您的反馈。我尝试将.babelrc 文件添加到我的项目的根目录并收到此错误：ReferenceError: Unknown plugin "transform-react-jsx" specified in "/Users/httpnick/react/csgo-cache/.babelrc" at 0, attempted to resolve relative to "/Users/httpnick/react/csgo-cache" while parsing file: /Users/httpnick/react/csgo-cache/public/js/index.js
@loganfsmyth 你知道我应该使用正确的 watchify 命令吗？或者我缺少什么依赖项？
@httpNick：看看上面答案中的编辑。
谢谢大家。这解决了问题！ ++++（我会在 2 分钟内接受答案，因为堆栈溢出暂时限制了我。）