Блог

Главная - Вопросы по программированию - Где разместить статический файл, чтобы иметь возможность ссылаться на него?

Где разместить статический файл, чтобы иметь возможность ссылаться на него?

#reactjs #node-modules

Вопрос:

vmsg требует URL-ссылки на .wasm файл, который требуется для работы. Их пример кода (который действительно работает) выглядит следующим образом:

 import React, { Component } from 'react';
import vmsg from 'vmsg';

const test = new vmsg.Recorder({wasmURL: "https://unpkg.com/vmsg@0.3.0/vmsg.wasm"});

Но я хотел бы, чтобы этот файл ссылался на каталог в моем приложении, а не на этот внешний URL-адрес, и я не уверен:

  1. Где я должен разместить этот файл ( assets / public / node_modules папку)?
  2. Что бы я сделал, чтобы это сработало (делаю ли я импорт или как-то ссылаюсь на него напрямую)?

Я попытался поместить файл в папку «Ресурсы» и изменить строку кода на многие вещи в соответствии с:

 const test = new vmsg.Recorder({wasmURL: '../../assets/vmsg.wasm'});

Но, похоже, ничего не работает, что после некоторого чтения имеет смысл. Но я все еще не уверен, каким должен быть правильный способ добавления такого файла.

Комментарии:

1. Это приложение, созданное CRA (см., например, create-react-app.dev/docs/использование общей папки ), или что-то другое? Вы используете Webpack (тогда загрузчик файлов должен быть настроен для импорта, чтобы указать вам путь)?

2. @jonrsharpe, я использую CRA с Craco. Итак, означает ли это, что я должен поместить его в общую папку и использовать что-то вроде process.env.PUBLIC_URL ? Было бы это правильно?

3. Насколько я понимаю, Craco используется для изменения конфигурации по умолчанию, поэтому, повлияют ли эти изменения на эту функциональность, мы не можем вам сказать, но я был бы склонен попробовать это на вашем месте.

4. Спасибо, @jonrsharpe, я пытаюсь использовать process.env.PUBLIC_URL , но получаю еще одну ошибку. Хотя, похоже, он действительно видит wasm файл. За надежду, что я на правильном пути. Спасибо.

Ответ №1:

Я видел, как некоторые люди сталкивались с чем-то подобным специально при попытке импортировать фотоактивы. Одно из решений, которое я нашел подходящим для этого, — включить .default в конце.

const test = new vsmg.Recorder({wasmURL: require('../../assets/vmsg.wasm').default});

Комментарии:

1. Это, кажется, работает (как и идея @jonsharpe добавить его в мою общую папку) — Теперь у меня проблема с загрузкой .wasm файла на моем локальном сервере, но, по крайней мере, это теперь работает. Спасибо!

Метки: ,