Kann ich einen ES6 / 2015-Modulimport verwenden, um eine Referenz im 'globalen' Bereich festzulegen?

Habe ich diese situation, wo ich versuche zu importieren einer vorhandenen Bibliothek, die ich nenne troublesome (mit Webpack/Babel FWIW) und es hat einen globalen Verweis auf jQuery im es die ich bin versucht zu lösen mit Modul-syntax.

Habe ich erfolgreich importiert jquery in den "lokalen" Umfang eines Moduls über:

import jQuery from 'jquery'

also habe ich versucht:

import jQuery from 'jquery'    
import 'troublesome'

aber vielleicht nicht überraschend, bekomme ich so etwas wie jQuery is not a function trat zurück von troublesome.js

Habe ich versucht dies auch:

System.import('jquery')
.then(jQuery => {
    window.jQuery = jQuery
})
import 'troublesome'

aber, es stellt sich heraus, dass System.import ist Teil des, so genannten, 'module-loader' spec, gezogen aus dem es6/2015-Spezifikation, so dass es nicht zur Verfügung gestellt von Babel. Es ist ein poly-fillaber Webpack nicht in der Lage sein zu verwalten dynamischer Importe erfolgt über Aufrufe System.import sowieso.

aber... wenn ich rufe, aus dem die Skript-Dateien in index.html etwa so:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/troublesome/troublesome.js"></script>
<script src="the-rest-of-my-js.js"></script>

den Verweis auf jQuery aufgelöst troublesome.js und die Dinge sind gut,
aber ich würde es vorziehen, zu vermeiden, um die script-tag-route als webpack nicht zu verwalten.

Kann jemand empfehlen, eine anständige Strategie für den Umgang mit Szenarien wie diesem?

update

mit etwas Anleitung von @TN1ck, ich war schließlich in der Lage zu erkennen Webpack-centric-Lösung, mit der Importe-loader

Die Konfiguration dieser Lösung sieht wie folgt aus:

  //...
  module: {
    loaders: [
      //...
      {
        test: require.resolve('troublesome'),
        loader: "imports?jQuery=jquery,$=jquery"
      }
    ]
  }

InformationsquelleAutor der Frage tony_k | 2015-07-03

14

Shimmen Module ist der Weg zu gehen: http://webpack.github.io/docs/shimming-modules.html

Ich zitiere aus der Seite:

plugin ProvidePlugin

Diese plugin-Modul verfügbar ist, als variable in jedem Modul. Das Modul ist nur erforderlich, wenn Sie verwenden der variable.

Beispiel: $ und jQuery zur Verfügung, die in jedem Modul-ohne das schreiben require("jquery").
```
new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "window.jQuery": "jquery"
})
```
Verwenden Sie dies mit Ihrem webpack-config fügen Sie einfach dieses Objekt zu einem array namens plugins in der config:
```
//the plugins we want to use 
var plugins = [
   new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
   })
];

//this is your webpack-config
module.exports = {
    entry: ...,
    output: ...,
    module: ...,
    plugins: plugins
}
```
InformationsquelleAutor der Antwort TN1ck

Für es6/2015 habe ich Folgendes getan.

import {jsdom} from 'jsdom';
import jQuery from 'jquery';
var window = jsdom(undefined, {}).defaultView;
var $ = jQuery(window);
//window.jQuery = $; //probably not needed but it's there if something wrong
//window.$ = $;//probably not needed but it's there if something wrong

Dann können Sie es als normalen

var text = $('<div />').text('hello world!!!').text();
console.log(text);

Hoffe, das hilft.

InformationsquelleAutor der Antwort Val

0

Importieren jQuery in Ihr Modul nicht zur Verfügung stellen für die 'troublesome'. Stattdessen könnten Sie erzeugen einen dünnen wrapper-Modul für 'troublesome' bietet jQuery und alle anderen erforderlichen "globals".

troublesome-module.js:
```
//Bring jQuery into scope for troublesome.
import jQuery from 'jquery';
//Import any other 'troublesome'-assumed globals.

//Paste or have build tool interpolate existing troublesome.js code here.
```
Dann in Ihrem code, den Sie sollten in der Lage sein, um
```
import 'troublesome-module';
```
InformationsquelleAutor der Antwort Noah Freitas
0

Ich habe ein ähnliches Problem mit jspm und dygraphs. Die Art, wie ich es gelöst wurde, verwenden Sie die dynamische Belastung, wie Sie versucht, mit System.import aber der wichtige Teil war die Kette-Last jeweils aufeinander folgenden "Teil" mit System.import wieder von innen die Versprechen onfulfillment handler (dann) nach der Einstellung der globalen namespace-variable. In meinem Fall hatte ich eigentlich mehrere import-Schritte getrennt zwischen then Handler.

Der Grund, warum es nicht funktioniert hat mit jspm, und wahrscheinlich der Grund, warum es nicht funktioniert für Sie ist auch, dass die import ... from ... syntax ausgewertet wird, bevor code, und auf jeden Fall vor System.import welche async.

In Ihrem Fall könnte es so einfach sein wie:
```
import jQuery from 'jquery';

window.jQuery = jQuery;
System.import('troublesome').then(troublesome => {
 //Do something with it...
});
```
Beachten Sie auch, dass die System Modul loader Empfehlung wurde in der letzten ES6-Spezifikation, und eine neue loader Spez erarbeitet.

InformationsquelleAutor der Antwort Amit
0
1. laufen npm install import-loader.
2. ersetzen import 'troublesome' mit import 'imports?jQuery=jquery,$=jquery!troublesome.
Meiner Meinung nach, ist dies die einfachste Lösung für deine Frage. Es ist ähnlich wie die Antwort, Sie schrieb in Ihrer Frage @TN1ck, aber ohne änderung der webpack config. Für weitere Informationen, siehe: https://github.com/webpack/imports-loader

InformationsquelleAutor der Antwort thisissami
0

Shimmen ist in Ordnung und es gibt verschiedene Möglichkeiten der Lösung, aber nach meiner Antwort hierdas einfachste ist eigentlich, nur um wieder zu verwenden, benötigen für das laden der Bibliothek erfordert, dass der Globale Abhängigkeit - dann nur sicherstellen, dass Ihre Fenster. Abtretung vor, dass die require-Anweisung, und Sie sind beide nach Ihrer sonstigen Einfuhren, und Ihre Bestellung sollte bleiben, wie vorgesehen. Das Problem wird verursacht von Babel hissen die Importe, so dass Sie alle ausgeführt werden, bevor anderer code.

InformationsquelleAutor der Antwort Ben Logan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

plugin ProvidePlugin