在 React JS 中为资产创建静态链接

Posted 2023-02-25

【中文标题】在 React JS 中为资产创建静态链接

【英文标题】：Creating static link for assets in React JS

【发布时间】：2019-10-05 08:56:55

【问题描述】：

我需要创建一个活动 url 或链接，以在我的应用程序中显示资产。

例如一个 dog.png 应该在类似的地方找到： localhost:3000/static/media/dog.png

在 React 中，对于图像文件，如果我这样做的话

import cat_png from '../../game_book/images/cat.png';

cat_png 实际上会保存以下对我有用的值：

http://localhost:3000/static/media/cat.35853d78.png

尽管 javascript 将 cat.png 更改为 cat.35853d78.png 在我的情况下这很好，因为我有一个指向该资产的静态 URL...（你怎么称呼这种链接？它被称为资产链接吗？ )...

但是对于我的 json 文件，如果我这样做：

import animals_json from '../../game_book/images/animals.json';

animal_json 实际上会包含 json 文件的内容 例如

frames: …, meta: …

并且没有给我一个可以显示 json 文件内容的活动 URL。

我想要的是这样的链接：

http://localhost:3000/static/media/animals.json

这将显示我的文件的内容

我正在阅读一本关于 javascript 游戏编程的书，示例代码通过资产的那些活动 URL 链接加载资产....

如何做到这一点？

【参考方案1】：

Webpack 4 提供对 json 文件的原生处理。这意味着默认情况下，json 文件的导入将由 webpack 处理，当我们尝试导入时，我们将始终将 json 作为 javascript 对象。

请参阅 Webpack 文档 https://webpack.js.org/concepts/ 在 Loaders 部分下 -

开箱即用，webpack 只理解 JavaScript 和 JSON 文件。

因此，如果您想覆盖此行为并将 json 作为 URL 导入，则必须添加一个额外的加载程序，该加载程序可以处理 json 文件并修改默认行为。

其中一个是 url-loader。在您的 webpack.config.js 中添加以下行 -

       
          test: /\.json$/,
          loader: 'url-loader',
          options: 
            limit: false,
            publicPath: 'assets'
          ,
          type:'javascript/auto'
        

这会将所有 json 文件加载为 url。

【讨论】：

嗨，我正在使用 React JS。 React 默认使用 Webpack 吗？我在哪里可以找到 React 应用程序中的 webpack.config.js？

您好，我已将其添加到 webpack.config.dev.js 文件中，但出现错误：./src/components/layout/Landing.js 中的错误模块未找到：'url- /Users/bliss/Documents/Coder/MERN/javascript_game_book/client/src/components/layout @ ./src/components/layout/Landing.js 34:15-61

顺便说一句，我已经在 React App 的客户端安装了 url-loader

即使安装了“url-loader”，您是否仍然看到“未找到模块”错误？

是的，我已经通过 npm install url-loader --save-dev 在客户端文件夹中安装了 url-loader