WebPack: требуется файл JavaScript в глобальной области видимости

Question

Как я могу require() библиотека поставщика в глобальном масштабе (с помощью упаковщика WebPack)? Независимо от того, имеет ли он exports определения или нет. Мне просто нужна библиотека, чтобы некоторые другие скрипты на странице также могли ее использовать.

Я нашел возможное решение с помощью script-loader лайк:

require('script-loader!./some-vendor-library.js');

И все работает отлично, но ключевым недостатком этого решения является то, что включенный скрипт фактически оценивается через eval() функция: код библиотеки вендора добавляется в конец bundle.js как строка (а не как реальный код). Есть ли аналогичное решение для библиотеки, которая будет включена в конечный комплект как код, а не как строка?

PS Иногда мне нужно делать это динамически, поэтому я не могу добавить это в конфигурацию веб-пакета.

Answer 1

Script-loader к сожалению, оборачивает включенные скрипты в строку, поэтому вы можете оценить его, используя Blob или что-то подобное. Но я думаю, что вы можете попробовать что-то еще.

Во-первых: убедитесь, что ваш require("./path/to/a-neat-module.js") на самом деле тянет в файл. Перейдите к полученному пакету и просмотрите код для подтверждения. Если возможно, используйте npm для установки любых библиотек, так что вы можете просто и просто вызвать require("a-neat-module")

Итак, как я могу сделать так, чтобы мои неэкспортированные переменные и функции были доступны?

Вы не можете напрямую.

В ваших входных файлах вызов этого сделает все экспортированные переменные, динамически доступными в ./js папки и подкаталоги, выставленные:

function requireAll(requireContext) {
    return requireContext.keys().map(requireContext);
}
var jsModules = requireAll(require.context("./js", true, /\.js$/));

Или, если у вас есть определенный модуль и глобальный в виду:

window["silly"] = require("./js/silly.js");
window["$"] = window["jQuery"] = require("jquery");

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

Так вот, где загрузчики и плагины, как script-loader а также globals-loader войти. Они помогают предварительно обработать ваши файлы, чтобы они были доступны вам позже.

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

Ps: вы проверили эффекты ouput.libraryTarget: "this" в твоем конфиге? Некоторые люди имели успех с этим.

PPs: Вы проверили webpack-raw-bundler? Он вставит ваш код в другой файл с сохраненной глобальной областью действия, но он будет в другом файле, чтобы вы могли запустить посткомпиляцию, чтобы объединить их в конце. Я запускаю это для нескольких файлов внешнего интерфейса, чтобы их неэкспортированные функции были доступны, как если бы каждый из файлов был включен в свои собственные <script> теги. Однако вы должны быть осторожны со временем загрузки и перегрузкой метода.