javascript - 我如何构造/访问我的非 node.js 应用程序的 react 组件？

Question

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

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

我最近开始学习使用 react.js，我想开始使用 React 开发新功能，同时保留所有现有功能，我知道 React.js 肯定可以用于此方式。

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

例如，我尝试搜索这个并找到了 this article提出以下结构

并指出:

Here index.jsx works as the entry point of the application. It uses ReactDOM.render to render App and gets the party started. App in turn does something interesting with Note. If I wanted yet another component, you would simply add it below /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 应用程序中导入/需要其他模块，您需要使用 bundler ，例如 webpack或 browserify .

它们的工作方式是从您的“入口”文件(在您的情况下为 index.jsx)开始，然后递归地跟踪您的所有导入/需求。然后它巧妙地将所有内容捆绑到一个“输出”文件中，其中包括您的应用程序使用的所有内容，您可以将其链接到您的 HTML 中。

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

这些 bundler 还有一些其他很酷的功能。例如，使用 webpack(带有额外的插件和加载器)你可以:

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

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

开始的好地方是优秀的 Survive JS系列教程。

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