Недавно я играл с response.js, и мне нравится скорость, с которой я могу развить рабочие компоненты пользовательского интерфейса. Теперь я создал немало компонентов, и я хотел бы распространять некоторые из них среди разных .jsx-файлов.Как использовать response.js без связующего?
Все, что я прочитал, говорит о том, что при переходе на производство я должен использовать наборщик, такой как browserify или webpacker. Однако я против этой идеи. Часть причины, по которой мне нравится развиваться в javascript, - это то, что он написан на языке сценария, и компилятор не работает. Если бы я хотел пообщаться с цепочками построения и тому подобное, я бы, вероятно, просто сделал свою работу по разработке в c.
Я прежде всего делаю инженерные инструменты. Это включает в себя создание инструмента, а затем предоставление ему других инженеров и операторов. Я, вероятно, больше не буду смотреть на инструмент уже год или два. Я ожидаю, что, когда мне нужно снова взглянуть на него, или кто-то, кто после меня, должен посмотреть на него, чтобы они могли перейти прямо в исходный код и начать вносить изменения. Я не хочу вспоминать, как моя среда сборки была настроена еще в 2016 году.
Для моего конкретного приложения мне также не важно скорость загрузки или ресурсы клиента. Никто не использует мои инструменты с телефона, и инструменты редко перезагружаются.
Итак, если вы не можете убедить меня в том, что я действительно хочу расслоить, какой самый чистый способ собрать одностраничные веб-приложения с компонентами response.js, разделяемыми между несколькими файлами .jsx?
ОБНОВЛЕНИЯ/РАФИНИРОВАННЫЙ ВОПРОС/ОТВЕТ ЧАСТИЧНЫЙ:
Я начал с примером из Quick Start without NPM. Вот простой пример того, что я пытаюсь достичь:
index.html:
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="hello1.jsx"></script>
<script type="text/babel" src="hello2.jsx"></script>
<script type="text/babel">
ReactDOM.render(
<div>
<Hello name='Bruce'/>
<Hello2 name='Bruce'/>
</div>,
document.getElementById('example')
);
</script>
</body>
</html>
hello1.jsx:
var Hello1 = React.createClass({
render: function() {
var name = this.props.name;
var message = 'Hello ' + name;
return <h1>{message}</h1>;
}
});
window.Hello1 = Hello1;
hello2.jsx:
var Hello2 = React.createClass({
render: function() {
var name = this.props.name;
var message = 'Hello ' + name;
return <p>{message}</p>;
}
});
window.Hello2 = Hello2;
Оказывается, что я отсутствовал в первый раз, все важные window.Hello1 = Hello1;. Эта строка предоставляет функцию глобальной области, иначе приложение сообщит об ошибке: Uncaught ReferenceError: Hello1 is not defined, потому что по умолчанию babel загружает каждый файл в свою область.
У меня все еще есть нерешенные вопросы. Теперь, благодаря некоторым полезным разъяснениям, полученным здесь, я знаю, как правильно их спросить. Во-первых, есть ли транскодер jsx, который имеет меньший вес, который не меняет видимость переменной?
Во-вторых, в моем примере babel-core/browser.js использует ajax для загрузки файла .jsx, а затем его преобразования. Однако это означает, что он не сработает при написании кода CORS при запуске локального файла, если я не запустил chrome с флагом --allow-files-access-from-files. Для этого есть элегантная работа?
Наконец, когда я пытаюсь использовать более новую версию bable-core, подобную этой: «https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js», она не будет работать. Вместо этого я получаю сообщение об ошибке: browser.js:19824 Uncaught TypeError: Cannot read property 'keys' of undefined. Зачем?
Довольно интересная идея. Взгляните на это: http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/ Он описывает подход к реактору, который кажется более похожим на ванильный JS, чем «современный» JS development re : транспилеры и еще много чего. Вы увидите, что он делает вызовы непосредственно в 'React.createElement (...)' как противостоящие, скажем, написанию JSX, который нуждается в транспиляции и по существу является синтаксическим сахаром для 'React.createElements' и других функций. – lux