如何在没有捆绑器的情况下使用react.js？ [英] How do I use react.js without a bundler?
问题描述
最近我一直在玩react.js，我喜欢我可以开发工作UI组件的速度。我现在已经创建了很多组件，我想在不同的.jsx文件中分发一些组件。
我读过的每件事都说我每次搬到制作时都应该使用像browserify或webpacker这样的捆绑器。但是我反对这个想法。我喜欢在javascript中开发的部分原因是因为它是一种脚本语言而且没有编译器可以随意使用。如果我想搞乱构建链等，我可能只是在c中进行开发工作。
我主要制作工程工具。这涉及制作工具，然后让其他工程师和操作员使用。我可能不会在一两年后再看一个工具。我希望当我确实需要再次查看它或者跟在我后面的人需要查看它时，他们可以直接进入源代码并开始进行更改。我不想记得我的构建环境是如何在2016年建立的。
对于我的特定应用程序，我也不关心加载速度或客户资源。没有人在手机上使用我的工具，工具很少会被重新加载。
所以，除非你能说服我，我真的想要捆绑，是什么最简单的方法是将单个页面的web应用程序放在一起，将react.js组件分成多个.jsx文件？
更新/改进的问题/部分答案：
我从没有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 / babelsrc =hello1.jsx>< / script>
< script type =text / babelsrc =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 ;
返回< h1> {message}< / h1> ;;
}
}）;
window.Hello1 = Hello1;
hello2.jsx：
var Hello2 = React.createClass（{
render：function（）{
var name = this.props.name;
var message ='Hello'+ name ;
返回< p> {message}< / p> ;;
}
}）;
window.Hello2 = Hello2;
事实证明，我第一次错过的是所有重要的 window.Hello1 = Hello1; 。此行将函数公开给全局范围，否则应用程序将给出错误：未捕获的ReferenceError：未定义Hello1 因为默认情况下babel会将每个文件加载到其自己的范围内。 / p>
我还有一些未解决的问题。现在，由于这里收到的一些有用的澄清，我知道如何正确地问他们。 首先，是否有一个重量较轻的jsx转码器不会改变变量范围？
其次，在我的例子中，babel-core /browser.js使用ajax加载.jsx文件，然后对其进行转换。但是，这意味着当在本地文件上运行时，CORS脚本将失败，除非我使用--allow-files-access-from-files标志启动chrome。有没有一个优雅的工作呢？
最后，当我尝试使用像这样的更新版本的bable-core时： https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1。 19 / browser.js ，它不会运行。相反，我得到一个错误： browser.js：19824 Uncaught TypeError：无法读取未定义的属性'keys'。为什么？
你必须要区分我认为，有一件事是捆绑（webpack或browserify），需要的工具组成项目的许多文件，并将它们捆绑在一个或多个文件中。这些工具不是必需的，但是如果你有一个更大的项目则非常有用。
经常涉及的其他工具是转换器，带有你的代码的工具和将它们转化为其他东西（如巴贝尔）。如果您使用普通的旧JavaScript，则不需要它们，如果您使用新的ES6语法，则需要它们在旧的javascript中翻译您的代码并在每个浏览器中运行它。
说没有这些工具是必需的。 React教程直接在页面中包含文件，无需任何其他工具即可运行，它不是很高效，但它没有其他工具。
Recently I have been playing around with react.js and I like the speed that I can develop working UI components. I have now created quite a few components and I would like to distribute some of them among different .jsx files.
Every thing I've read says that I should be using a bundler like browserify or webpacker whenever moving to production. However I am against this idea. Part of the reason I like developing in javascript is because its a scripted language and there is no compiler to muck around with. If I wanted to mess around with build chains and the like I would probably just do my development work in c.
I primarily make engineering tools. This involves making a tool and then giving it other engineers and operators to use. I probably won't look at a tool again for a year or two. I expect that when I do need to look at it again or someone following after me needs to look at it that they can jump right into the source code and start making changes. I don't want to have to remember how my build environment was set up back in 2016.
For my particular application, I also don't care about load speed or client resources. No one is using my tools from a phone and the tools will rarely be reloaded.
So, unless you can convince me that I really do want to bundle, what is the cleanest way to put together single page web application(s) with react.js components split among multiple .jsx files?
UPDATE / REFINED QUESTION / PARTIAL ANSWER:
I started with the example from Quick Start without NPM. Here is a simple example of what I was trying to achieve:
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;
It turns out that what I was missing the first time was the all important window.Hello1 = Hello1;. This line exposes the function to the global scope otherwise the application will give the error: Uncaught ReferenceError: Hello1 is not defined because by default babel loads each file into its own scope.
I still have some unresolved questions. Now, thanks to some of the helpful clarification received here, I know how to properly ask them. First, is there a jsx transcoder that is lighter weight that doesn't change variable scoping?
Secondly, in my example, babel-core/browser.js makes use of ajax to load the .jsx file and then transform it. However this means it will fail does to CORS scripting when run on a local file unless I start chrome with the --allow-files-access-from-files flag. Is there an elegant work around for this?
Finally, when I try to use a newer version of bable-core like this one: "https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js", it will not run. Instead I get an error: browser.js:19824 Uncaught TypeError: Cannot read property 'keys' of undefined. Why?
you have to make a distinction I think, one thing is the bundler (webpack or browserify), tools that takes the many files that compose your project and bundle them together in one or more files. These tools are not required but the are extremely useful if you have a larger project.
The other kind of tools that are often involved are transpiler, tools that takes your code and transform them in something else (like babel). If you are using plain old javascript they are not required, if you are using the new ES6 syntax you need them to translate your code in the old javascript and run it in every browser.
That said non of theese tools are required. the React tutorial includes the files directly in the page and it works without any other tools, it's not very performant but it works without other tools.
这篇关于如何在没有捆绑器的情况下使用react.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
