如何在没有bundler的情况下使用react.js

How do I use react.js without a bundler?

本文关键字：情况下 react js bundler      更新时间：2024-04-13

最近我一直在玩react.js，我喜欢开发工作UI组件的速度。我现在已经创建了相当多的组件，我想将其中一些组件分发到不同的.jsx文件中。

我读到的每一篇文章都说，无论何时进入生产阶段，我都应该使用像browserfy或webpacker这样的bundler。然而，我反对这个想法。我喜欢用javascript开发的部分原因是因为它是一种脚本语言，没有编译器可供使用。如果我想处理构建链之类的问题，我可能只会在c.中进行开发工作

我主要生产工程工具。这包括制作一个工具，然后交给其他工程师和操作员使用。我可能在一两年内不会再看工具了。我希望当我确实需要再次查看它，或者有人在我之后需要查看它时，他们可以直接进入源代码并开始进行更改。我不想记得我的构建环境是如何在2016年建立起来的。

对于我的特定应用程序，我也不关心加载速度或客户端资源。没有人在手机上使用我的工具，而且这些工具很少会重新加载。

所以，除非你能说服我，我真的想捆绑，否则把带有react.js组件的单页web应用程序放在多个.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/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脚本，除非我使用--allowfilesaccessfromfiles标志启动chrome。这方面有什么高雅的工作吗？

最后，当我尝试使用像这样的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。为什么？

我发现这是使用jsx最简单的方法，不需要任何构建步骤：

<!DOCTYPE html>
<html>
<head>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
    <script type="text/babel" data-presets="es2017, stage-3" data-plugins="syntax-async-functions,transform-class-properties"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="App.jsx"></script>
<script type="text/babel" >
    ReactDOM.render(<App/>, document.getElementById('app'));
</script>
</body>
</html>

以及在App.jsx:中

class App extends React.Component {
    render() {
        return <div>This is some jsx!</div>;
    }
}

我认为，你必须做出区分，一件事是bundler（webpack或browserfy），它可以将组成项目的许多文件捆绑在一个或多个文件中。这些工具不是必需的，但如果您有一个更大的项目，则非常有用。

通常涉及的另一种工具是transpiler，即获取代码并将其转换为其他东西（如babel）的工具。如果您使用的是纯旧的javascript，则不需要它们；如果您使用新的ES6语法，则需要它们将代码转换为旧的javascript并在每个浏览器中运行。

也就是说，非这些工具是必需的。React教程直接在页面中包含文件，它在没有任何其他工具的情况下工作，它的性能不太好，但在没有其他工具的条件下工作。

除了关于webpack/browsrify的介绍之外。

您可以将应用程序开发为一组独立的组件，并能够直接运行它们，而无需将它们捆绑到一个文件中。要做到这一点，请使用es6模块构建组件，并在适当的地方导入/导出它们。这样的组件可以被任何人使用——组件的用户唯一应该做的就是使用模块加载器并在应用程序的引导程序中初始化它。

下面我将举一个使用systemjs作为加载器的例子，但它也可以是requirejs或其他什么。

YourComponent.jsx:

export class YourComponent extends React.Component {
  render() {
    return <div>Hi</div>;
  }
}
ReactDOM.render(<YourComponent/>, document.querySelector("#mount"));

如果在index.html中systemjs设置为：，则可以使用它

<!doctype html>
<html>
<body>
    <div id="mount"></div>
    <script src="lib/systemjs/dist/system.src.js"></script>
    <script>
        System.config({
            paths: {
                "react*": 'yourDistFolder/react/dist/react-with-addons', 
                "react-dom": 'yourDistFolder/react-dom/dist/react-dom'
            }             
        });
        System.defaultJSExtensions = true;
    </script>
<!--.....-->
    <script>
        System.import('yourcomponent').catch(function(e)
        {
            console.error(e);
        });
    </script>
</body>
</html>

在这个示例中，我包含了引导，YourComponent实际上被用作根组件，如果它是父应用程序的一部分，这当然不是必要的。

希望这能有所帮助。

我想为了避免使用这些工具，您只需要在HTML文档的结束正文标记之前将react和react dom以及所有文件包含在页面中。我相信React网站上的教程使用了这种方法，并避免使用任何工具。

相关文章：