Fatal编程技术网
  • javascript/
  • Javascript 是否可以仅使用Web包编译的文件来呈现react应用程序或组件？

Javascript 是否可以仅使用Web包编译的文件来呈现react应用程序或组件？

javascript reactjs webpack

Javascript 是否可以仅使用Web包编译的文件来呈现react应用程序或组件？,javascript,reactjs,webpack,Javascript,Reactjs,Webpack,一旦webpack将所有文件和依赖项编译成JS和CSS，是否可以仅使用这些文件来呈现应用程序或单个组件 我已经复制了webpack生成的文件，并在html文件中引用了它们，同时通过CDN加载到react中 <meta charset="utf-8"/> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js

一旦webpack将所有文件和依赖项编译成JS和CSS，是否可以仅使用这些文件来呈现应用程序或单个组件

我已经复制了webpack生成的文件，并在html文件中引用了它们，同时通过CDN加载到react中

<meta charset="utf-8"/>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    <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>

    <link rel="stylesheet" type="text/css" href="onboard-9699e581.css">

</head>
<body>
    <div id="app"></div>

    <script type="text/javascript" src="./application-164084cc642ac889b814.js"></script>
    <script type="text/javascript" src="./onboard-d3392dbee6550206507b.js"></script>

</body>
</html>
也许我没有理解webpack的作用，但我假设我在jsx文件中创建的组件都将编译成JS，现在位于
/board-d3392dbee6550206507b.JS
文件中？这将允许我引用它们，并允许通过
reactDOM.render？

如果我需要澄清什么，请告诉我。我还在想办法解决这个问题

干杯。

我们的想法是将所有内容打包到一个JavaScript文件中，该文件在页面呈现时运行。React代码附加到您预定义的任何元素（在大多数情况下，这将是div#app），并根据您的所有JSX和其他逻辑构建DOM

JSX不是要逐个添加的独立代码-您已经构建了一个“只运行”的完整应用程序。JSX只是编写HTML的一种奇特的方式，它还可以包含脚本，并允许编写多行HTML片段等功能，以便于阅读

仔细研究一下，看看以后是否更有意义。请特别注意，当他们在
dist
文件夹外运行应用程序时，这相当于运行站点的生产版本（在webpack之后）。

确切地说，就是这样，webpack所做的是传输所有jsx文件，并将这些文件捆绑到一个输出js文件中，该文件将由index.html调用（这就是为什么使用id=“root”）作为脚本标记的div。这是因为大多数web浏览器还不能读取jsx。它还缩小了过程中的代码，使其重量更轻，这意味着加载速度更快