带有 React 和 Browserify 的 ES6

Question

所以我正在尝试将 ES6 的 import 语句与 React 和 browserify 一起使用来创建一个网络应用程序。我有一些障碍，这是第一个。

这是我的 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。

Answer 1

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

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

希望对您有所帮助。

编辑：

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

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

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

带有 React 和 Browserify 的 ES6

ES6 with React and Browserify

javascript

node.js

reactjs

ecmascript-6

browserify