如何构建/访问非node.js应用程序的react组件？

Question

我有一个生产应用程序，其文件夹结构与您期望的一样：

/project
   /css
   /js
   /php
   /fonts
   /images
   /index.php

我最近开始学习使用react.js，我想开始使用react开发新功能，同时保留所有现有功能，我理解react.js当然可以这样使用。

什么不完全清楚，是如何在我的非node.js项目中构建文件并访问它们。

例如，我尝试搜索此内容并找到了提出以下结构的this article

并声明：

  

这里index.jsx作为应用程序的入口点。它使用ReactDOM.render呈现App并启动派对。应用程序依次使用Note做一些有趣的事情。如果我想要另一个组件，你只需将它添加到/ components下面。

据推测，这是一个node.js项目，其中index.jsx可以调用require('components/App.jsx');之类的东西，但是如何在我的非node.js项目中实现相同的目标。

考虑我是否设置了以下文件夹结构：

/project
   /css
   /js
   /php
   /fonts
   /images
   /react
      /components
         /App.jsx   
         /Note.jsx 
      /scripts
         /featureFoo.jsx
   /index.php

鉴于上述情况，我希望index.php加载react/scripts/featureFoo.jsx以某种方式包含/使用react/components/App.jsx和react/components/Note.jsx

我想我可以在index.php中加载脚本标签来加载所有组件，然后featureFoo.jsx，但我觉得还有更多的react方法可以做到这一点。

所以

如何构建/访问非node.js应用程序的react组件？

我正在标记node.js因为我觉得这些用户可能会因为必须处理多个项目/方法而对此有所了解。

Answer 1

为了在非node.js（即基于浏览器的）JS应用程序中导入/需要其他模块，您需要使用诸如webpack或browserify之类的捆绑器

他们的工作是从您的＆＃34;条目＃34; file（在你的情况下是index.jsx）并递归地跟随你的所有导入/需求。然后它巧妙地将所有内容捆绑到一个＆＃34;输出＆＃34;文件，包括您的应用程序使用的所有内容，您可以在HTML中进行链接。

您还可以将更复杂的配置与多个输入和输出文件一起使用，甚至可以动态加载＆＃34; chunks＆＃34;在您的申请中的某些点。但以上是最基本的用例，适用于大多数简单的项目。

这些捆绑包还有其他一些很酷的功能。例如，使用webpack（带有额外的插件和加载器），您可以：

1. 编写ES6 / ES7 JavaScript（通过babel）编译成跨浏览器兼容的ES5
2. 缩小/ uglify您的输出JS
3. 导入/需要非js文件，如CSS，图像和网页字体，并选择如何处理这些导入（例如，预处理/后处理CSS或优化图像）
4. 将所有导入的CSS解压缩到单个.css文件
5. 使用webpack-dev-server（或webpack-dev-middleware）来利用热模块替换，这使得开发JS应用程序变得更加容易，让您可以在浏览器中立即看到更改生效，而无需刷新或丢失应用程序的状态。

还有更多。捆绑者的世界是一个非常大的生态系统，需要学习很多，但它完全值得进入。

入门的好地方是优秀的Survive JS系列教程。

但是，如果你还在学习React，那么潜入webpack以及JavaScript工具的整个生态系统可能会让人无法抗拒。它可能会更容易，更有效地利用你的时间来保持简单，然后只有在你熟悉React之后才进入捆绑包等。