带有 React 和 Browserify 的 ES6
ES6 with React and Browserify
所以我正在尝试将 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。
我认为您的项目结构中缺少 .babelrc
文件,其中可能包含:
{
"presets": ["es2015"],
"plugins": ["transform-react-jsx"]
}
希望对您有所帮助。
编辑:
当您使用 CLI 时,您可以像这样传递缺少的 es2015
:
watchify -t [ babelify --presets [ es2015 react ] ] index.js -o ../build/bundle.js
(注意上面一行中的附加 es2015
,这是与您的代码的唯一区别)。
所以我正在尝试将 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。
我认为您的项目结构中缺少 .babelrc
文件,其中可能包含:
{
"presets": ["es2015"],
"plugins": ["transform-react-jsx"]
}
希望对您有所帮助。
编辑:
当您使用 CLI 时,您可以像这样传递缺少的 es2015
:
watchify -t [ babelify --presets [ es2015 react ] ] index.js -o ../build/bundle.js
(注意上面一行中的附加 es2015
,这是与您的代码的唯一区别)。