Beides ist möglich: Sie können Bibliotheken mit einem <script>
(dh zum Verwenden einer Bibliothek aus einem CDN) oder in das generierte Bundle aufnehmen.
Wenn Sie es über ein <script>
Tag laden , können Sie die externals
Option verwenden, um das Schreiben require(...)
in Ihre Module zu ermöglichen.
Beispiel mit Bibliothek von CDN:
<script src="https://code.jquery.com/jquery-git2.min.js"></script>
// the artifial module "jquery" exports the global var "jQuery"
externals: { jquery: "jQuery" }
// inside any module
var $ = require("jquery");
Beispiel mit Bibliothek im Bundle enthalten:
copy `jquery-git2.min.js` to your local filesystem
// make "jquery" resolve to your local copy of the library
// i. e. through the resolve.alias option
resolve: { alias: { jquery: "/path/to/jquery-git2.min.js" } }
// inside any module
var $ = require("jquery");
Die ProvidePlugin
können Module (freien) Variablen zuordnen. So definieren Sie könnte: „Jedes Mal , verwende ich die (freie) Variable xyz
in einem Modul , das Sie (webpack) sollte so eingestellt xyz
zu require("abc")
.“
Beispiel ohne ProvidePlugin
:
// You need to require underscore before you can use it
var _ = require("underscore");
_.size(...);
Beispiel mit ProvidePlugin
:
plugins: [
new webpack.ProvidePlugin({
"_": "underscore"
})
]
// If you use "_", underscore is automatically required
_.size(...)
Zusammenfassung:
- Bibliothek von CDN: Verwenden Sie
<script>
Tag und externals
Option
- Bibliothek aus Dateisystem: Nehmen Sie die Bibliothek in das Bundle auf. (Ändern Sie möglicherweise die
resolve
Optionen, um die Bibliothek zu finden.)
externals
: Stellen Sie globale Variablen als Modul zur Verfügung
ProvidePlugin
: Stellen Sie Module als freie Variablen in Modulen zur Verfügung
new
vorwebpack.ProvidePlugin
webpack.github.io/docs/list-of-plugins.html{__esModule: true, default: MY_DEFAULT_EXPORT}
stattMY_DEFAULT_EXPORT
in den Dateien.Etwas Cooles ist, dass Sie, wenn Sie das
ProvidePlugin
in Kombination mit derexternals
Eigenschaft verwenden,jQuery
in den Abschluss Ihres Webpack-Moduls gelangen können, ohne dies explizit tun zu müssenrequire
. Dies kann nützlich sein, um Legacy-Code mit vielen verschiedenen Dateireferenzen zu überarbeiten$
.jetzt in index.js
wird eine kompilierte Ausgabe mit etwas wie unten in den
webpackBootstrap
Abschluss übergeben haben:Daher können Sie sehen, dass dies
$
auf das globale / FensterjQuery
aus dem CDN verweist , aber an den Abschluss übergeben wird. Ich bin mir nicht sicher, ob dies beabsichtigte Funktionalität oder ein glücklicher Hack ist, aber es scheint für meinen Anwendungsfall gut zu funktionieren.quelle
require/import
.$
würde einfach funktionieren, weil es den globalen Geltungsbereich erreichen wird, egal was passiert. DasProviderPlugin
erfordert das Parsen des AST, damit es ein teures Plugin ist und Ihre Build-Zeit spürbar verlängert. Es ist also im Grunde eine Verschwendung.ProvidePlugin
ein Objekt wie zurückgegeben wurde, esmyModule.default
sei denn, ich habe das Modul zu externen hinzugefügt? Ich hätte nie gedacht, dass es eine direkte Beziehung geben würde.Ich weiß, dass dies ein alter Beitrag ist, dachte aber, es wäre nützlich zu erwähnen, dass der Webpack-Skriptlader auch in diesem Fall nützlich sein kann. Aus den Webpack-Dokumenten:
"Skript: Führt eine JavaScript-Datei einmal im globalen Kontext aus (wie im Skript-Tag), erfordert, dass sie nicht analysiert werden."
http://webpack.github.io/docs/list-of-loaders.html
https://github.com/webpack/script-loader
Ich fand dies besonders nützlich, wenn ältere Build-Prozesse migriert werden, die JS-Herstellerdateien und App-Dateien zusammenfassen. Ein Wort der Warnung ist, dass der Skriptlader nur durch Überladung zu funktionieren scheint
require()
und nicht funktioniert, soweit ich dies anhand einer webpack.config-Datei feststellen kann. Obwohl viele argumentieren, dass Überladungrequire
eine schlechte Praxis ist, kann es sehr nützlich sein, Anbieter- und App-Skripte in einem Bundle zusammenzufassen und gleichzeitig JS Globals verfügbar zu machen, die nicht in zusätzliche Webpack-Bundles eingeteilt werden müssen. Beispielsweise:Dies würde $ .cookie, History und moment innerhalb und außerhalb dieses Bundles global verfügbar machen und diese Herstellerbibliotheken mit dem Skript main.js und allen
require
d-Dateien bündeln .Nützlich bei dieser Technik ist auch:
Wenn Sie Bower verwenden, wird die
main
Datei in jederrequire
d-Bibliothek package.json angezeigt. Im obigen Beispiel ist in History.js keinemain
Datei angegeben, daher ist der Pfad zur Datei erforderlich.quelle