Помощ при програмиране, отговори на въпроси / Javascript / React ES6 SystemJS - Uncaught (по обещание) Грешка: Неочаквано символично <(...) - javascript, reactjs, ecmascript-6, systemjs

React ES6 SystemJS - Uncaught (в обещание) Грешка: Неочаквано символично <(...) - javascript, reactjs, ecmascript-6, systemjs

аз имам react и react-dom инсталирани и внесени чрез System.config долу, но все още получавам тази грешка по-долу:

Неподдържан (в обещание) Грешка: Неочаквано символично <(...)

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ES2015 Module Example</title>
</head>
<body>
<script src="lib/system.js"></script>
<script>
System.config({
"baseURL": "src",

// Set defaultJSExtensions to true so you don"t have to use .js extension when importing the es6 module.
"defaultJSExtensions": true,

// "plugin-babel" or "traceur" or "typescript"
transpiler: "traceur",

map: {
"react": "./node_modules/react/dist/react.min.js",
"react-dom": "./node_modules/react-dom/dist/react-dom.min.js",
"traceur": "./lib/traceur.min.js",
"plugin-babel": "./lib/plugin-babel/plugin-babel.js",
"systemjs-babel-build": "./lib/plugin-babel/systemjs-babel-browser.js"
},
});
System.import("app.js");
</script>
</body>
<div id="example"></div>
</html>

app.js:

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

var Hello = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});

ReactDOM.render(
<Hello name="World" />,
document.getElementById("example")
);

Какви други идеи трябва да конфигурирам?

Отговори:

0 за отговор № 1

браузърът е най-доброто решение (за производство и развитие) - за мен:

npm install --save-dev babel-preset-react

преглъщане:

var gulp = require("gulp");

var browserify = require("browserify");
var babelify = require("babelify");
var source = require("vinyl-source-stream");
var buffer = require("vinyl-buffer");
var uglify = require("gulp-uglify");
var sourcemaps = require("gulp-sourcemaps");
var livereload = require("gulp-livereload");

gulp.task("build", function() {
// app.js is your main JS file with all your module inclusions
return browserify({entries: "src/app.js", debug: true})
.transform("babelify", { presets: ["es2015", "react"] })
.bundle()
.pipe(source("compile.min.js"))
.pipe(buffer())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write("./maps"))
.pipe(gulp.dest("js"))
.pipe(livereload());
});

gulp.task("default", ["build"]);

Що се отнася до непроизводството със SystemJS (болезнено бавно):

<!DOCTYPE html>
<script src="https://jspm.io/system@0.19.js"></script>
<script>
System.config({
transpiler: "babel",
babelOptions: {}
});
System.import("./main.js");
</script>

Все още можете да използвате глуп за развитие. Просто добавете това към глипфала:

gulp.task("watch", ["build"], function () {
livereload.listen();
gulp.watch("js/*.js", ["build"]);
});

gulp.task("default", ["watch"]);

Това ви спестява от други досадни работни процеси като изброени тук.

-1 за отговор № 2

Unexpected token < обикновено се появява в html5 приложения, когато сървърът е конфигуриран да връща съдържанието на index.html вместо 404 страници (така натискането на клавиша f5 върху динамичното маршрутизиране продължава да работи). Проверете след това мрежовия панел в конзолата за програмисти на браузърите и вижте кой js файл бе доставен с html съдържание.