Могу ли я использовать require с webpack для внешних файлов? - PullRequest
0 голосов
/ 14 февраля 2019

Я хочу импортировать некоторые статические файлы, которые могут не существовать.Я хочу изменить эти внешние статические файлы и загрузить их в мое приложение, но Webpack выдает «модуль не найден»

Моя структура папок выглядит так в dev:

  • src
    • статический
      • config
        • cfg.json
        • folder1
          • file1.js
        • папка2
          • file2.js
    • компонент
      • Main.js

и в рабочем веб-пакете соберите все, а затем скопируйте статические ресурсы, создав структуру папок следующим образом:

  • config (с тем жефайлы и папки внутри, но они могут быть удалены или изменены впоследствии)
  • app.js
  • стилей и т. д.

То, что я хочу сделать, это потребоватьиз файла Main.js файлы из папки config в статических ресурсах.

Статические активы могут существовать или не существовать.Поэтому я попытался поместить 'require' в блок try / catch, в этом случае, если требуемые файлы не найдены, тогда я использую другой поток в catch.

Я могу использовать require с этим путемв Main.js ('../static/config/cfg.json'), но затем Webpack объединяет все это, поэтому, если я изменю файлы в папке config в рабочей среде, изменения не будут видны в приложении.

На производстве и в разработке я могу получить доступ к статическим файлам по http://localhost:3000/config/cfg.json или http://localhost:3000/config/folder1/file1.js

Я могу использовать fetch, но не знаю, как прочитать переменную, которая являетсяэкспортированный по умолчанию в file1.js, я могу читать только весь файл в виде строки, используя FileReader.

И с fetch код кажется действительно грязным.Есть ли способ сделать это с помощью require и выбрать соответствующий путь, без Webpack, бросая 'module not found'?

Пример кода

try {
    let config = require('../static/config/cfg.json'); // if the cfg.json doesn't exist go straight to catch

    if (!config.active) {
        // throw error
    }

    // continue flow and read the js files
    // if the js files don't exist go straight to catch
}
catch(e => {
    // follow another flow
})

Как я уже сказал, этот код работает, ноесли я изменяю что-либо в рабочей среде в статических файлах, изменения не видны, поскольку Webpack требует файлы, которые он связал.

Я ожидал увидеть изменения, внесенные в мои внешние файлы, но вместо этого Webpack требует статическиефайлы, которые он создает.

Заранее спасибо!

Редактировать: --- добавлена ​​запись конфигурации webpack ---

// ------------------------------------
// Entry Points
// ------------------------------------


// config.clientDir is the 'src' folder
// main.js is a file located in the 'src' folder, where React.DOM is called.
// so APP_ENTRY_PATH = 'src/main.js'

// config.compiler.publicPath = /app-name/ui // in this format...

const APP_ENTRY_PATH = paths.base(config.clientDir) + '/main.js';

webpackConfig.entry = {
  app: __DEV__ ?
    [APP_ENTRY_PATH, `webpack-hot-middleware/client?path=${config.compiler.publicPath}__webpack_hmr`] :
    [APP_ENTRY_PATH],
  vendor: config.compiler.vendor
};

1 Ответ

0 голосов
/ 16 февраля 2019

Поскольку я не нашел способа с веб-пакетом, я изменил файлы с расширением JS на JSON и использовал fetch для получения данных JSON.

См. Это для более подробной информации:

ЗДЕСЬ

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...