Есть просто пример в котором я использую React:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<p>
This is the first comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="1"></div>
</p>
</body>
<script src="https://unpkg.com/react@16.3.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.3.2/umd/react-dom.production.min.js"></script>
<script type="text/javascript">
import React, { Component } from 'react';
const e = createElement;
class LikeButton extends Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
let isLiked = localStorage.getItem("likedState") || this.state.liked;
if (isLiked) {
return 'You liked comment number ' + this.props.commentID;
}
return e(
'button',
{ onClick: () => { localStorage.setItem("likedState", true); this.setState({ liked: true })} },
'Like'
);
}
}
document.querySelectorAll('.like_button_container')
.forEach(domContainer => {
const commentID = parseInt(domContainer.dataset.commentid, 10);
ReactDOM.render(
e(LikeButton, { commentID: commentID }),
domContainer
);
});
</script>
</html>
Есть серверная часть(на Java), которая обрабатывает js код из этого примера и подставляет туда уже транспилированный код:
init("var babelWrapper=function(bwc){return Babel.transform(bwc," +
"{" +
"presets:['es2015', 'react', 'stage-1']," +
"sourceMaps:" + (isDev ? "'inline'" : "false") + "," +
"comments: " + isDev + "," +
"plugins:['" + Optional.ofNullable(module)
.map(s -> "transform-es2015-modules-" + s)
.orElse(ARROW_SUPPORT_PLUGIN)
+ "']" +
"}).code;}", javaScriptFileName());
После транспиляции кода ошибка в браузере - require is not defined. Подключаю transform-es2015-modules-amd для babel + requirejs - никаких ошибок, но код не отрабатывает(хотя и транспилируется правильно).
Собственно, как мне сделать так, чтобы браузер понимал конструкции типа import React, { Component } from 'react'; ?
При этом я не могу использовать ни npm, ни webpack, ни такие инструменты как Browserify (или просто не понимаю как их заюзать на стороне сервера, который написан на Java).
