Estou usando o Webpack no meu aplicativo, no qual crio dois pontos de entrada - bundle.js para todos os meus arquivos / códigos JavaScript e vendors.js para todas as bibliotecas, como jQuery e React. O que faço para usar plug-ins que possuem jQuery como dependências e quero tê-los também em vendors.js? E se esses plugins tiverem várias dependências?
Atualmente, estou tentando usar este plugin jQuery aqui - https://github.com/mbklein/jquery-elastic . A documentação do Webpack menciona allowPlugin e imports-loader. Eu usei o allowPlugin, mas ainda o objeto jQuery não está disponível. Aqui está como meu webpack.config.js se parece:
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;
Mas, apesar disso, ele ainda gera um erro no console do navegador:
ReferenceError não capturado: jQuery não está definido
Da mesma forma, quando eu uso o carregador de importações, ele gera um erro,
exigir não está definido '
nesta linha:
var jQuery = require("jquery")
No entanto, eu poderia usar o mesmo plug-in quando não o adicionei ao meu arquivo vendors.js e, em vez disso, exigi-lo da maneira AMD normal, como incluo meus outros arquivos de código JavaScript, como:
define(
[
'jquery',
'react',
'../../common-functions',
'../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
$("#myInput").elastic() //It works
});
Mas não é isso que eu quero fazer, pois isso significa que o jquery.elastic.source.js está incluído no meu código JavaScript no bundle.js e quero que todos os meus plugins jQuery estejam no pacote vendors.js. Então, como faço para conseguir isso?
fonte
Respostas:
Você combinou diferentes abordagens de como incluir módulos de fornecedores herdados. É assim que eu lidaria com isso:
1. Prefira CommonJS / AMD não minificado em vez de
dist
A maioria dos módulos vincula a
dist
versão nomain
campo delespackage.json
. Embora isso seja útil para a maioria dos desenvolvedores, para o webpack é melhor usar o alias dasrc
versão, pois assim o webpack pode otimizar melhor as dependências (por exemplo, ao usar oDedupePlugin
).No entanto, na maioria dos casos, a
dist
versão também funciona bem.2. Use o
ProvidePlugin
para injetar globais implícitosA maioria dos módulos herdados depende da presença de globais específicos, como os plugins jQuery em
$
oujQuery
. Nesse cenário, você pode configurar o webpack, para acrescentarvar $ = require("jquery")
sempre que encontrar o$
identificador global .3. Use o imports-loader para configurar
this
Alguns módulos herdados dependem de
this
ser owindow
objeto. Isso se torna um problema quando o módulo é executado em um contexto CommonJS em quethis
é igual amodule.exports
. Nesse caso, você pode substituirthis
o carregador de importações .Corra
npm i imports-loader --save-dev
e depoisO carregador de importações também pode ser usado para injetar manualmente variáveis de todos os tipos. Mas na maioria das vezes
ProvidePlugin
é mais útil quando se trata de globais implícitos.4. Use o imports-loader para desativar o AMD
Existem módulos que suportam diferentes estilos de módulos, como AMD, CommonJS e legado. No entanto, na maioria das vezes, eles primeiro procuram
define
e, em seguida, usam algum código peculiar para exportar propriedades. Nesses casos, pode ajudar a forçar o caminho CommonJS configurandodefine = false
.5. Use o carregador de scripts para importar scripts globalmente
Se você não se importa com variáveis globais e apenas deseja que scripts herdados funcionem, também pode usar o carregador de scripts. Ele executa o módulo em um contexto global, como se você os tivesse incluído através da
<script>
tag.6. Use
noParse
para incluir discos grandesQuando não há uma versão AMD / CommonJS do módulo e você deseja incluir o
dist
, pode sinalizar este módulo comonoParse
. Em seguida, o webpack incluirá apenas o módulo sem analisá-lo, o que pode ser usado para melhorar o tempo de compilação. Isso significa que qualquer recurso que exija o AST , como oProvidePlugin
, não funcionará.fonte
ProvidePlugin
é aplicado em todas as ocorrências dos identificadores fornecidos em todos os arquivos. Oimports-loader
pode ser aplicado em arquivos específicos somente, mas você não deve usar tanto para as mesmas variáveis / dependências.$
variável global ."module": { "loaders": [ { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },
e funcionou bem.Para acesso global ao jquery, existem várias opções. No meu projeto mais recente do webpack, eu queria acesso global ao jquery e adicionei o seguinte às minhas declarações de plug-ins:
Isso significa que o jquery pode ser acessado no código-fonte JavaScript por meio das referências globais $ e jQuery.
Obviamente, você também deve ter instalado o jquery via npm:
Para um exemplo prático dessa abordagem, fique à vontade para bifurcar meu aplicativo no github
fonte
ProvidePlugin
solução que você sugere já foi proposta?./~/jQuery/dist/jquery.js There is another module with an equal name when case is ignored.
e o mesmo com./~/jquery/dist/jquery.js
'window.jQuery': 'jquery'
a essa lista para fazer o pacote npm ms-signalr-client carregar. Eu também colocar em'window.$': 'jquery'
boa medida :)Não sei se entendi muito bem o que você está tentando fazer, mas tive que usar os plugins jQuery que exigiam que o jQuery estivesse no contexto global (janela) e coloquei o seguinte no meu
entry.js
:O eu só tenho que exigir onde eu quiser o
jqueryplugin.min.js
ewindow.$
é estendido com o plugin conforme o esperado.fonte
Consegui fazer as coisas funcionarem bem ao expor
$
ejQuery
como variáveis globais com o Webpack 3.8.1 e o seguinte.Instale o jQuery como uma dependência do projeto. Você pode omitir
@3.2.1
a instalação da versão mais recente ou especificar outra versão.Instale
expose-loader
como uma dependência de desenvolvimento, se ainda não estiver instalado.Configure o Webpack para carregar e expor o jQuery para nós.
fonte
expose-loader
, a fim de que ele funcione corretamentenpm install expose-loader --save-dev
expose-loaded
fizeram por mim. Não recebi um erro no momento da compilação, mas nas ferramentas de desenvolvedor do Chrome. Isso está resolvido agora.Adicione isso ao seu array de plugins no webpack.config.js
então exija jquery normalmente
Se a dor persistir na obtenção de outros scripts, tente explicitamente colocá-lo no contexto global via (na entrada js)
fonte
No seu arquivo webpack.config.js, adicione abaixo:
Instale o jQuery usando o npm:
No arquivo app.js, adicione as linhas abaixo:
Isso funcionou para mim. :)
fonte
Tentei algumas das respostas fornecidas, mas nenhuma delas parecia funcionar. Então eu tentei isso:
Parece funcionar, não importa qual versão eu estou usando
fonte
$
fora de um arquivo exigido pelo webpack, ele será indefinido.Isso funciona no webpack 3:
no arquivo webpack.config.babel.js:
E use o ProvidePlugin
fonte
A melhor solução que encontrei foi:
https://github.com/angular/angular-cli/issues/5139#issuecomment-283634059
Basicamente, você precisa incluir uma variável fictícia em typings.d.ts, remover qualquer "importação * como $ de 'jquery" do seu código e adicionar manualmente uma marca ao script jQuery ao seu html SPA. Dessa forma, o webpack não estará no seu caminho e você poderá acessar a mesma variável global do jQuery em todos os seus scripts.
fonte
Isso funciona para mim no webpack.config.js
em outro javascript ou em HTML, adicione:
fonte
Editar: Às vezes, você deseja usar o webpack simplesmente como um empacotador de módulo para um projeto simples da web - para manter seu próprio código organizado. A solução a seguir é para aqueles que querem apenas que uma biblioteca externa funcione conforme o esperado em seus módulos - sem usar muito tempo mergulhando nas configurações do webpack. (Editado após -1)
Solução rápida e simples (es6) se você ainda estiver com problemas ou quiser evitar a configuração externa / configuração adicional do plugin webpack:
dentro de um módulo:
fonte