Управление зависимостями плагина jQuery в веб-пакете
Я использую Webpack в своем приложении, в котором я создаю две точки входа - bundle.js для всех моих файлов / кодов JavaScript и vendors.js для всех библиотек, таких как jQuery и React. Что я делаю для того, чтобы использовать плагины, которые имеют jQuery в качестве своих зависимостей, и я хочу, чтобы они были также в vendors.js? Что если эти плагины имеют несколько зависимостей?
В настоящее время я пытаюсь использовать этот плагин jQuery здесь - https://github.com/mbklein/jquery-elastic. В документации к Webpack упоминаются предоставленный плагин и импорт-загрузчик. Я использовал 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. Так как же мне добиться этого?
12 ответов
Вы смешали разные подходы, как включить устаревшие модули вендора. Вот как я бы занялся этим:
1. Предпочитаю унифицированный CommonJS/AMD dist
Большинство модулей связывают dist версия в main поле их package.json, Хотя это полезно для большинства разработчиков, для веб-пакетов лучше использовать псевдоним src версия, потому что таким образом веб-пакет может оптимизировать зависимости лучше (например, при использовании DedupePlugin).
// webpack.config.js
module.exports = {
...
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
}
};
Однако в большинстве случаев dist версия работает просто отлично.
2. Используйте ProvidePlugin вводить неявные глобалы
Большинство устаревших модулей полагаются на наличие определенных глобальных переменных, как это делают плагины jQuery на $ или же jQuery, В этом сценарии вы можете настроить веб-пакет, чтобы добавить var $ = require("jquery") каждый раз, когда он сталкивается с глобальным $ идентификатор.
var webpack = require("webpack");
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
3. Используйте импорт-загрузчик для настройки this
Некоторые устаревшие модули полагаются на this быть window объект. Это становится проблемой, когда модуль выполняется в контексте CommonJS, где this равняется module.exports, В этом случае вы можете переопределить this с импортом-загрузчиком.
Бежать npm i imports-loader --save-dev а потом
module: {
loaders: [
{
test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
loader: "imports-loader?this=>window"
}
]
}
Загрузчик импорта также может быть использован для ручного ввода переменных всех видов. Но большую часть времени ProvidePlugin полезнее, когда речь идет о неявных глобалах.
4. Используйте import-loader для отключения AMD
Существуют модули, которые поддерживают разные стили модулей, такие как AMD, CommonJS и Legacy. Тем не менее, большую часть времени они сначала проверяют define а затем использовать какой-то изворотливый код для экспорта свойств. В этих случаях это может помочь форсировать путь CommonJS, установив define = false,
module: {
loaders: [
{
test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
loader: "imports-loader?define=>false"
}
]
}
5. Используйте скрипт-загрузчик для глобального импорта скриптов
Если вы не заботитесь о глобальных переменных и просто хотите, чтобы унаследованные скрипты работали, вы также можете использовать скрипт-загрузчик. Он выполняет модуль в глобальном контексте, как если бы вы включили их через <script> тег.
6. Используйте noParse включать большие диски
Когда нет версии модуля AMD/CommonJS, и вы хотите включить dist Вы можете пометить этот модуль как noParse, Тогда веб-пакет просто включит модуль, не анализируя его, что можно использовать для сокращения времени сборки. Это означает, что любая функция, требующая AST, например ProvidePlugin, не будет работать.
module: {
noParse: [
/[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
]
}
Для глобального доступа к jquery существует несколько вариантов. В моем последнем проекте веб-пакета я хотел получить глобальный доступ к jquery, поэтому я добавил следующее в мои объявления плагинов:
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
Это означает, что jquery доступен из исходного кода JavaScript через глобальные ссылки $ и jQuery.
Конечно, вам также нужно установить jquery через npm:
$ npm i jquery --save
Для рабочего примера такого подхода, пожалуйста, не стесняйтесь, чтобы мое приложение раскошелиться на GitHub
Я не знаю, хорошо ли я понимаю, что вы пытаетесь сделать, но мне пришлось использовать плагины jQuery, которые требовали, чтобы jQuery находился в глобальном контексте (окне), и я помещаю следующее в свой entry.js:
var $ = require('jquery');
window.jQuery = $;
window.$ = $;
Я просто должен требовать, где я хочу jqueryplugin.min.js а также window.$ расширен с плагином, как и ожидалось.
У меня все хорошо работает, выставляя $ а также jQuery как глобальные переменные с Webpack 3.8.1 и далее.
Установите jQuery как зависимость проекта. Вы можете опустить @3.2.1 установить последнюю версию или указать другую версию.
npm install --save jquery@3.2.1
устанавливать expose-loader как зависимость развития, если она еще не установлена.
npm install expose-loader --save-dev
Настройте Webpack для загрузки и предоставления нам jQuery.
// webpack.config.js
const webpack = require('webpack')
module.exports = {
entry: [
// entry bits
],
output: {
// output bits
},
module: {
rules: [
// any other rules
{
// Exposes jQuery for use outside Webpack build
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}
]
},
plugins: [
// Provides jQuery for other JS bundled with Webpack
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
}
В вашем файле webpack.config.js добавьте ниже:
var webpack = require("webpack");
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
Установите jQuery, используя npm:
$ npm i jquery --save
В файле app.js добавьте следующие строки:
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
Это сработало для меня.:)
Добавьте это к вашему массиву плагинов в webpack.config.js
new webpack.ProvidePlugin({
'window.jQuery': 'jquery',
'window.$': 'jquery',
})
тогда требуют jquery нормально
require('jquery');
Если боль сохраняется, когда другие сценарии видят ее, попробуйте явно поместить ее в глобальный контекст через (во входе js)
window.$ = jQuery;
Я попробовал некоторые из предоставленных ответов, но ни один из них, казалось, не работал. Тогда я попробовал это:
new webpack.ProvidePlugin({
'window.jQuery' : 'jquery',
'window.$' : 'jquery',
'jQuery' : 'jquery',
'$' : 'jquery'
});
Кажется, работает независимо от того, какую версию я использую
Это работает в веб-пакете 3:
в файле webpack.config.babel.js:
resolve: {
alias: {
jquery: "jquery/src/jquery"
},
....
}
И используйте ProvidePlugin
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery',
})
Изменить: Иногда вы хотите использовать веб-пакет просто в качестве модуля модуля для простого веб-проекта - чтобы сохранить свой собственный код организованным. Следующее решение предназначено для тех, кто просто хочет, чтобы внешняя библиотека работала должным образом внутри своих модулей, не тратя много времени на настройку веб-пакетов. (Отредактировано после -1)
Быстрое и простое (es6) решение, если вы все еще испытываете трудности или хотите избежать настройки внешнего интерфейса / дополнительной конфигурации плагина webpack:
<script src="cdn/jquery.js"></script>
<script src="cdn/underscore.js"></script>
<script src="etc.js"></script>
<script src="bundle.js"></script>
внутри модуля:
const { jQuery: $, Underscore: _, etc } = window;
Лучшее решение, которое я нашел, было:
https://github.com/angular/angular-cli/issues/5139
По сути, вам нужно включить фиктивную переменную в typings.d.ts, удалить из кода "import * as $ from" из jquery, а затем вручную добавить тег в сценарий jQuery в ваш HTML-код SPA. Таким образом, webpack не будет мешать вам, и вы сможете получить доступ к одной и той же глобальной переменной jQuery во всех ваших сценариях.
Это работает для меня на webpack.config.js
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
в другом JavaScript или в HTML добавить:
global.jQuery = require('jquery');
Кто бы ни столкнулся с какими-либо проблемами после применения хороших решений, найденных здесь, все, что вам нужно, это просто следовать четкой инструкции в файле webpack.config.js:
// uncomment if you're having problems with a jQuery plugin
.autoProvidejQuery()
Раскомментировав эту строку, вы заставите все работать хорошо!