Я использую Webpack в своем приложении, в котором я создаю две точки входа - bundle.js для всех моих файлов / кодов JavaScript и vendors.js для всех библиотек, таких как jQuery и React. Что я делаю для того, чтобы использовать плагины, которые имеют jQuery в качестве своих зависимостей, и я хочу, чтобы они были также в vendors.js? Что если эти плагины имеют несколько зависимостей?
В настоящее время я пытаюсь использовать этот плагин jQuery здесь - https://github.com/mbklein/jquery-elastic . В документации веб-пакета упоминаются предоставленный плагин и импорт-загрузчик. Я использовал providePlugin, но все же объект jQuery недоступен. Вот как выглядит мой webpack.config.js:
var webpack = require('webpack');
var bower_dir = __dirname + '/bower_components';
var node_dir = __dirname + '/node_modules';
var lib_dir = __dirname + '/public/js/libs';
var config = {
addVendor: function (name, path) {
this.resolve.alias[name] = path;
this.module.noParse.push(new RegExp(path));
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jQuery",
"window.jQuery": "jquery"
}),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
],
entry: {
app: ['./public/js/main.js'],
vendors: ['react','jquery']
},
resolve: {
alias: {
'jquery': node_dir + '/jquery/dist/jquery.js',
'jquery.elastic': lib_dir + '/jquery.elastic.source.js'
}
},
output: {
path: './public/js',
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'jsx-loader' },
{ test: /\.jquery.elastic.js$/, loader: 'imports-loader' }
]
}
};
config.addVendor('react', bower_dir + '/react/react.min.js');
config.addVendor('jquery', node_dir + '/jquery/dist/jquery.js');
config.addVendor('jquery.elastic', lib_dir +'/jquery.elastic.source.js');
module.exports = config;
Но, несмотря на это, он все равно выдает ошибку в консоли браузера:
Uncaught ReferenceError: jQuery не определен
Точно так же, когда я использую импорт-загрузчик, он выдает ошибку,
требование не определено
в этой строке:
var jQuery = require("jquery")
Тем не менее, я мог бы использовать тот же плагин, когда не добавлял его в файл vendors.js, а вместо этого требовал его обычным способом AMD, как то, как я включаю мои другие файлы кода JavaScript, например:
define(
[
'jquery',
'react',
'../../common-functions',
'../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
$("#myInput").elastic() //It works
});
Но это не то, что я хочу сделать, так как это означает, что jquery.elastic.source.js связан с моим кодом JavaScript в bundle.js, и я хочу, чтобы все мои плагины jQuery были в комплекте vendors.js. Так как же мне добиться этого?
источник
Ответы:
Вы смешали разные подходы, как включить устаревшие модули вендора. Вот как я бы занялся этим:
1. Предпочитаю унифицированный CommonJS / AMD, а не
dist
Большинство модулей связывают
dist
версии в своейmain
областиpackage.json
. Хотя это полезно для большинства разработчиков, для веб-пакета лучше присвоить псевдонимsrc
версии, поскольку таким образом веб-пакет может оптимизировать зависимости (например, при использованииDedupePlugin
).Однако в большинстве случаев
dist
версия работает просто отлично.2. Используйте,
ProvidePlugin
чтобы ввести неявные глобалыБольшинство устаревших модулей зависят от наличия определенных глобальных переменных, как это делают плагины jQuery
$
илиjQuery
. В этом сценарии вы можете настроить веб-пакет, добавляяvar $ = require("jquery")
каждый раз, когда он встречает глобальный$
идентификатор.3. Используйте импорт-загрузчик для настройки
this
Некоторые устаревшие модули полагаются на
this
то, чтобы бытьwindow
объектом. Это становится проблемой, когда модуль выполняется в контексте CommonJS, гдеthis
равноmodule.exports
. В этом случае вы можете переопределитьthis
с помощью import-загрузчика .Беги
npm i imports-loader --save-dev
а потомЗагрузчик импорта также может быть использован для ручного ввода переменных всех видов. Но в большинстве случаев
ProvidePlugin
это более полезно, когда речь заходит о неявных глобалах.4. Используйте import-loader для отключения AMD
Существуют модули, которые поддерживают разные стили модулей, такие как AMD, CommonJS и Legacy. Однако большую часть времени они сначала проверяют,
define
а затем используют какой-то изворотливый код для экспорта свойств. В этих случаях это может помочь форсировать путь CommonJS путем установкиdefine = false
.5. Используйте скрипт-загрузчик для глобального импорта скриптов
Если вы не заботитесь о глобальных переменных и просто хотите, чтобы унаследованные скрипты работали, вы также можете использовать скрипт-загрузчик. Он выполняет модуль в глобальном контексте, как если бы вы включили их через
<script>
тег.6. Используйте
noParse
для включения больших дисковКогда нет версии модуля AMD / CommonJS и вы хотите включить
dist
, вы можете пометить этот модуль какnoParse
. Тогда веб-пакет просто включит модуль, не анализируя его, что можно использовать для сокращения времени сборки. Это означает, что любая функция, требующая AST , напримерProvidePlugin
, не будет работать.источник
ProvidePlugin
Применяются на все вхождения данных идентификаторов во всех файлах.imports-loader
Могут быть применены на конкретные файлы только, но вы не должны использовать как для одних и тех же переменных / зависимостей.$
переменной."module": { "loaders": [ { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },
и все работало нормально.Для глобального доступа к jquery существует несколько вариантов. В моем последнем проекте веб-пакета я хотел получить глобальный доступ к jquery, поэтому я добавил следующее в мои объявления плагинов:
Это означает, что jquery доступен из исходного кода JavaScript через глобальные ссылки $ и jQuery.
Конечно, вам также нужно установить jquery через npm:
Для рабочего примера такого подхода, пожалуйста, не стесняйтесь, чтобы мое приложение раскошелиться на GitHub
источник
ProvidePlugin
решение, которое вы предлагаете, уже было предложено?./~/jQuery/dist/jquery.js There is another module with an equal name when case is ignored.
и то же самое с./~/jquery/dist/jquery.js
'window.jQuery': 'jquery'
в этот список, чтобы загрузить пакет ms-signalr-client npm. Я также вставил'window.$': 'jquery'
для хорошей меры :)Я не знаю, хорошо ли я понимаю, что вы пытаетесь сделать, но мне пришлось использовать плагины jQuery, которые требовали, чтобы jQuery находился в глобальном контексте (окне), и я добавил следующее в свой
entry.js
:Я просто должен требовать, где я хочу,
jqueryplugin.min.js
иwindow.$
расширяется с плагином, как и ожидалось.источник
Я получил все, что работает хорошо, выставляя
$
иjQuery
как глобальные переменные с Webpack 3.8.1 и следующим.Установите jQuery как зависимость проекта. Вы можете не
@3.2.1
устанавливать последнюю версию или указать другую версию.Установить
expose-loader
как зависимость разработки, если она еще не установлена.Сконфигурируйте Webpack для загрузки и предоставления нам jQuery.
источник
expose-loader
, чтобы он работал правильноnpm install expose-loader --save-dev
expose-loaded
Сделал это для меня. Я не получил ошибку во время компиляции, но в инструментах разработчика Chrome. Это решено сейчас.Добавьте это в ваш массив плагинов в webpack.config.js
тогда требуется jquery нормально
Если боль по-прежнему заставляет другие сценарии увидеть ее, попробуйте явно поместить ее в глобальный контекст через (во входе js)
источник
В вашем файле webpack.config.js добавьте ниже:
Установите jQuery с помощью npm:
В файле app.js добавьте следующие строки:
Это сработало для меня. :)
источник
Я попробовал некоторые из предоставленных ответов, но ни один из них, казалось, не работал. Тогда я попробовал это:
Кажется, работает независимо от того, какую версию я использую
источник
$
вне веб-пакета требуемый файл, он будет неопределенным.Это работает в веб-пакете 3:
в файле webpack.config.babel.js:
И используйте ProvidePlugin
источник
Лучшее решение, которое я нашел, было:
https://github.com/angular/angular-cli/issues/5139#issuecomment-283634059
По сути, вам нужно включить фиктивную переменную в typings.d.ts, удалить из кода любой «import * as $ from 'jquery», а затем вручную добавить тег к сценарию jQuery в ваш HTML-код SPA. Таким образом, webpack не будет мешать вам, и вы сможете получить доступ к одной и той же глобальной переменной jQuery во всех ваших скриптах.
источник
Это работает для меня на webpack.config.js
в другом JavaScript или в HTML добавить:
источник
Изменить: Иногда вы хотите использовать веб-пакет просто в качестве модуля модуля для простого веб-проекта - чтобы сохранить свой собственный код организованным. Следующее решение предназначено для тех, кто просто хочет, чтобы внешняя библиотека работала должным образом внутри своих модулей, не тратя много времени на настройку веб-пакетов. (Отредактировано после -1)
Быстрое и простое (es6) решение, если вы все еще испытываете трудности или хотите избежать настройки внешнего интерфейса / дополнительной конфигурации плагина webpack:
внутри модуля:
источник