如何构建/访问我的非 node.js 应用程序的反应组件？答案

【问题标题】：How can I structure/access the react components of my non node.js application?如何构建/访问我的非 node.js 应用程序的反应组件？
【发布时间】：2016-05-30 23:19:35
【问题描述】：

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

/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 应用程序的反应组件？

我标记了node.js，因为我觉得这些用户可能会因为必须处理多个项目/方法而带来对此的见解。

【问题讨论】：

标签： javascript node.js reactjs

【解决方案1】：

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

它们通过从您的“入口”文件（在您的情况下为 index.jsx）开始并递归地遵循您的所有导入/要求来工作。然后它巧妙地将所有内容捆绑到一个“输出”文件中，其中包括您的应用程序使用的所有内容，您可以在 HTML 中链接。

您还可以使用具有多个输入和输出文件的更复杂的配置，甚至可以在应用程序的某些点动态加载“块”。但以上是最基本的用例，适用于最简单的项目。

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

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

还有更多。打包工具的世界是一个相当大的生态系统，有很多东西要学，但完全值得一试。

优秀的Survive JS 系列教程是一个很好的起点。

但是，如果您仍在学习 React，那么深入研究 webpack 和 JavaScript 工具的整个生态系统可能会让人不知所措。一开始让事情保持简单可能会更容易和更有效地利用你的时间，然后在你熟悉 React 之后才进入打包程序等。

【讨论】：