我们在哪里放置资产（比如图片）以及我们如何将它们加载到 React + Flux Web 应用程序组件上？答案

【问题标题】：Where do we place assets (like pictures) and how do we load them on a React + Flux web app component?我们在哪里放置资产（比如图片）以及我们如何将它们加载到 React + Flux Web 应用程序组件上？
【发布时间】：2015-08-21 05:38:59
【问题描述】：

我正在创建一个 React + Flux Web 应用程序，其文件结构如下所示：

MyApp
|---
|---scripts
    |---app.jsx
    |---actions
    |---components
        |---HomePage.react.jsx
        |---NotFoundPage.react.jsx  
        |--- ...etc
    |---dispatcher
    |---stores

1) 我应该将图片、视频、文本文件等公共资源放在哪里......

2) 是否有标准/简洁的方式来加载它们？我找到的只是this 库，但肯定有更多人使用。

【问题讨论】：

取决于你的项目的大小。小项目我只是把它们全部转储到一个/public文件夹中（可能分成/img、/media等），对于大型项目我通常通过 NodeJS 服务器（或类似服务器）提供它们

标签： node.js reactjs assets reactjs-flux flux

【解决方案1】：

我通常使用dist 或public 文件夹来保存所有资产。当我发布应用程序时，捆绑包保存在 dist 文件夹中。

例如：

MyApp
|-- app
|    |---app.jsx
|    |---actions
|    |---components
|        |---HomePage.react.jsx
|        |---NotFoundPage.react.jsx  
|        |--- ...etc
|    |---dispatcher
|    |---stores
|-- public
     | -- js -- bunlde.js
     | -- img -- images
     | -- css -- app.css

是否有标准/简洁的方式来加载它们？我发现的只是这个库，但肯定有更多人使用。

您可以将它们包含在 index.html 中。但是，最近我一直在将 css 捆绑到 javascript 文件中，这样我就有了一个文件。你可以这样做：

webpack: https://github.com/webpack/css-loader
浏览：https://github.com/cheton/browserify-css

【讨论】：