Webpack: перенос ресурсов, перенесенных в каталог dist с помощью copy-webpack-plugin - PullRequest
Новая
       20

Webpack: перенос ресурсов, перенесенных в каталог dist с помощью copy-webpack-plugin

0 голосов
/ 31 мая 2019

Я интегрирую SPA, построенный преимущественно с использованием d3.js, в Webpack. Я провожу с Бабелем и использую последние версии всего ..

Перед интеграцией d3.js позволил мне (на основе событий) динамически, полностью повторно использовать, рекурсивно и, следовательно, без усилий вводить сценарии в обслуживаемый html-файл. Единственное, что я должен был предоставить, - это основополагающие файлы JSON.

Например (просто для информации, не критично для понимания вопроса), для файла javascript создания меню: 

case "js":
  files_to_attach
  .insert("script") // --> inject into html file
  .attr("src", function() {
    return "frontend/" + filetype + "/" + menu_group + "/" + menu + "/" + filename + "." + filetype;
  })
  .attr("type", "text/javascript") // Also tried using type "module" here
  .attr("class", menu)
  .attr("id", menu_item);
break;

Этот подход использовался во всех загруженных активах.

В Webpack есть свои собственные механизмы динамической загрузки, но я решил (импортируя все внешние скрипты, затем выбирая, по требованию, из назначенных им константных имен), придерживаясь вышесказанного, снова напрямую вводя их в dist / файл index.html.

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

Чтобы все это произошло, мне пришлось перенести скрипты в блоке из внешнего интерфейса (обычно 'src') в каталог dist с помощью 'copy-webpack- плагин.

Это отличается от предписанного предписанного метода ленивой загрузки Webpack тем, что эти сценарии являются внешними, а не неотъемлемой частью index.js.

Проблема? Эти файлы по-прежнему содержат нетранслируемые операторы импорта, провоцирующие следующее: 

SyntaxError: import declarations may only appear at top level of a module

Эти операторы импорта, разумеется, лежат в начале каждого модуля.

Тогда возникает вопрос:

Если скрипты правильно введены в окончательный HTML-код, как я могу убедиться, что они также (до или после) переносятся?

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

РЕЗЮМЕ ТАК FAR

Webpack безжалостно блокирует все попытки доступа к файловой системе не в стиле 'import' или 'require', но ни import, ни require не могут вернуть прямую ссылку на файл (в отличие от содержимого файла). Таким образом, операторы import (которые do приводят к переносу) не могут быть использованы для внедрения скрипта в HTML.

Инъекции сценариев с использованием библиотек, таких как d3.js, просто остаются без транспонирования Есть ли какие-то средства для их «силовой» транспортировки?

Единственное документированное средство внедрения сценария - эффективно статическое, с использованием нескольких точек входа. Кроме того, похоже, что не существует плагина, который мог бы помочь с динамическим внедрением скрипта. (Ближайшее решение, которое я нашел, это inject-html-webpack-plugin, но документация плагина очень краткая, без примера использования так называемого «преобразователя»).

По-настоящему динамическое внедрение скриптов в HTML кажется заблокированным на всех фронтах.

Файлы, скопированные с помощью copy-webpack-plugin, не переносятся, но я вижу упоминание здесь извилистого обходного пути («скопируйте файлы из файлов src в модуль, обработайте их и затем переместите сгенерированные / обработанные файлы ").

1 Ответ

0 голосов
/ 31 мая 2019

copy-webpack-plugin буквально является командой fs.move.Поскольку некоторые плагины запускаются в первую очередь, чем загрузчики, особенно в этом случае, они не переносятся.

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

...