0
Ich bekomme immer Fehler nach der Kompilierung: can't find variable: exports.Wie kann ich reagieren, um mit Babel und Gulp zu arbeiten?
Hier sind meine Dateien.
Gulpfile.js
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('react', function() {
gulp.src('./resources/components/*.jsx')
.pipe(babel({presets: ['react', 'es2015']}))
.pipe(gulp.dest('./public/js'));
});
gulp.task('default', ['react']);
./resources/components/HelloWorld.jsx
import React, {PropTypes, Component} from 'react'
export default class HelloWorld extends Component {
constructor (props) {
super(props)
}
render() {
return (
<table>
<tr>
<th>Title</th>
<th>Description</th>
<th>Actions</th>
</tr>
<tr>
<td>Hello World</td>
<td>Loren ipsum</td>
<td>Delete | Update</td>
</tr>
</table>
);
}
}
ReactDOM.render(<HelloWorld/>, document.getElementById('main'));
index.html
<!doctype html>
<html>
<head>
<title>Crossover - Project</title>
<meta charset="utf-8">
</head>
<body>
<main id="main"></main>
<script src="./js/HelloWorld.js"></script>
</body>
</html>
Ich weiß nicht, was ich tue, falsch Hier. Hier ist die Ausgabe.
HelloWorld.js
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var HelloWorld = function (_Component) {
_inherits(HelloWorld, _Component);
function HelloWorld(props) {
_classCallCheck(this, HelloWorld);
return _possibleConstructorReturn(this, Object.getPrototypeOf(HelloWorld).call(this, props));
}
_createClass(HelloWorld, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'table',
null,
_react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'th',
null,
'Title'
),
_react2.default.createElement(
'th',
null,
'Description'
),
_react2.default.createElement(
'th',
null,
'Actions'
)
),
_react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'td',
null,
'Hello World'
),
_react2.default.createElement(
'td',
null,
'Loren ipsum'
),
_react2.default.createElement(
'td',
null,
'Delete | Update'
)
)
);
}
}]);
return HelloWorld;
}(_react.Component);
// this is where the error occurs
exports.default = HelloWorld;
ReactDOM.render(_react2.default.createElement(HelloWorld, null), document.getElementById('main'));
Ich bin sehr neu zu reagieren und ich will nicht webpack verwenden, da ich bereits einen Webserver + Rahmen laufen haben und ich möchte reagieren in meine Anwendung integrieren.
Mein Verständnis ist, dass Knotenumgebung eine einzelne JS-Datei in ES5 erstellen muss, dass der Browser analysieren kann. Wie erstelle ich diese Datei? Ich möchte es mit Gulp und vielleicht Node machen, aber nicht so etwas wie Webpack benutzen. Ich möchte, dass die Reaktionsdateien statisch sind, anstatt dass der Knoten sie jedes Mal erzeugt. Ich verstehe wirklich nicht, wie ES6, Babel, Gulp und React zusammenarbeiten können. – Gasim
Haben Sie meinen bearbeiteten Post gesehen? – laruiss
Ich habe gerade getan und danke! Nach vielen Recherchen habe ich React wirklich verstanden und Ihre Bearbeitung hat mich dazu gebracht, eine Menge Dinge zu klären. Eine Sache, die mir auffiel, war, dass React nicht gut mit Schluck funktioniert. Also, zuerst habe ich versucht, browserify zu verwenden, aber es war langsam. Jetzt habe ich wieder angefangen, Webpack zu benutzen, weil es wirklich großartig für die Entwicklungsumgebung ist. – Gasim