backbone.js script loader - Webpack ProvidePlugin vs externe?




2 Answers

Es ist beides möglich: Sie können Bibliotheken mit einem <script> (dh um eine Bibliothek aus einem CDN zu verwenden) einbeziehen oder sie in das generierte Paket aufnehmen.

Wenn Sie es über das <script> -Tag laden, können Sie die Option externals , um das Schreiben von require(...) in Ihren Modulen zu ermöglichen.

Beispiel mit Bibliothek aus 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");

Das ProvidePlugin kann Module (freien) Variablen ProvidePlugin . So könnten Sie definieren: "Jedes Mal, wenn ich die (freie) Variable xyz innerhalb eines Moduls verwende, sollte Sie (webpack) xyz 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 die Option <script> tag und externals
  • Bibliothek aus Dateisystem: Fügen Sie die Bibliothek in das Paket ein. (Vielleicht modifizieren Sie die resolve , um die Bibliothek zu finden)
  • externals : Stellen Sie globale Variablen als Modul zur Verfügung
  • ProvidePlugin : ProvidePlugin Sie Module als freie Variablen innerhalb von Modulen zur Verfügung
jquery

Ich Webpack die Idee, Webpack mit Backbone.js .

Ich habe die Kurzanleitung verfolgt und habe eine allgemeine Vorstellung davon, wie Webpack funktioniert, aber ich weiß nicht, wie man die Abhängigkeitsbibliothek wie jquery / backbone / underscore laden kann.

Sollten sie extern mit <script> geladen werden oder ist das etwas was Webpack wie RequireJS's Shim handhaben kann?

Laut dem Webpack-Dokument: Shimming-Module , ProvidePlugin und externals scheinen damit verwandt zu sein (so ist bundle! Loader irgendwo), aber ich kann nicht herausfinden, wann ich welches verwenden soll.

Vielen Dank




Ich weiß, das ist ein alter Post, aber ich denke, es wäre nützlich zu erwähnen, dass der Webpack-Skriptlader auch in diesem Fall nützlich sein könnte. Aus den Webpack-Dokumenten:

"script: Führt eine JavaScript-Datei einmal im globalen Kontext aus (wie im Skript-Tag), Requests werden nicht analysiert."

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 Anwendungsdateien zusammenführen. Ein Wort der Warnung ist, dass der Skript-Loader nur durch Überladen von require() funktioniert und nicht so weit funktioniert, wie ich sagen kann, wenn er in einer Datei webpack.config angegeben wird. Obwohl viele argumentieren, dass das Überladen require schlechte Übung ist, kann es sehr nützlich sein, um Anbieter- und Anwendungsskript in einem Paket zusammenzufassen und gleichzeitig JS-Globals, die nicht zusätzlich in Webpack-Pakete eingegrenzt werden müssen, verfügbar zu machen. Beispielsweise:

require('script!jquery-cookie/jquery.cookie');
require('script!history.js/scripts/bundled-uncompressed/html4+html5/jquery.history');
require('script!momentjs');

require('./scripts/main.js');

Das würde $ .cookie, History und moment global innerhalb und außerhalb dieses Bundles verfügbar machen und diese Hersteller-Bibliotheken mit dem main.js-Skript und all seinen d-Dateien bündeln.

Auch nützlich bei dieser Technik ist:

resolve: {
  extensions: ["", ".js"],
  modulesDirectories: ['node_modules', 'bower_components']
},
plugins: [
  new webpack.ResolverPlugin(
    new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
   )
]

das Bower verwendet, wird die main in jedem require d Bibliotheken package.json betrachten. Im obigen Beispiel wurde in "History.js" keine main angegeben, daher ist der Pfad zur Datei erforderlich.




Related