Question

所以我尝试使用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()它可以工作，但导入只是不喜欢为我工作。任何帮助解决这个问题或我可以检查的事情都将非常感谢..我真的想用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，这是与您的代码的唯一区别。）

ES6与React和Browserify

1 个答案: