2016-08-11 6 views
1

Ich arbeite an einer Anwendung, die die ReadiumJS-Bibliothek abrufen muss, die AMD-Module verwendet. Die App selbst ist in es6 mit webpack und babel geschrieben. Ich habe das Vendor-Bundle richtig funktioniert und es zieht die eingebaute Readium-Datei, aber wenn ich versuche, eines der Module zu verlangen, sagt Webpack, dass es sie nicht lösen kann. Wer macht das schon mal mit Webpack und RequireJS? Hier einige Informationen, die helfen können - nicht sicher, was anderes zu schließen, da dies mein erstes Mal ist wirklich Webpack mit ..Anforderung von RequireJS-Modulen mit Webpack

Ordnerstruktur

/readium-src 
    /readium-js 
    /*** all readium-specific files and build output (have to pull down repo and build locally) 
/node_modules 
/src 
    /app.js -> main entry for my app 

/webpack.config.babel.js

webpack.config.js Einträge

entry: { 
    vendorJs: [ 
     'jquery', 
     'angular', 
     '../readium-src/readium-js/build-output/_single-bundle/readium-js_all.js', 
     'bootstrap/js/alert.js' //bootstrap js example 
    ], 
    appJs: './app.js' 
} 

es erfordert in app.js

var readiumSharedGlobals = require('readium_shared_js/globals'); 

ich nie wirklich in mit RequireJS Des Versuch, zu kämpfen, um wirklich zu verstehen, wie diese Art von Modul an der Seite von anderen Arten von Modulen mit webpack zu konsumieren. Jede Hilfe sehr geschätzt :)

aktualisieren

Wenn ich meine app.js ändern, um dies zu verwenden, anstatt:

window.rqReadium = require('../readium-src/readium-js/build-output/_single-bundle/readium-js_all.js'); 

Dann scheint es, zu versuchen, alle Module zu laden, aber ich ein seltsamer Fehler:

Uncaught Error: No IPv6 

an diesem Punkt bin ich von

unsicher
  1. Muss ich den gesamten Pfad so benötigen?
  2. Ist dieser Fehler etwas von Webpack, Requirejs oder Readium? Versuchte das Debuggen, aber nicht etwas Nützliches ...

UPDATE 2016.08.12 ist

Ich denke, das mit einer Bibliothek zu einem Problem im Zusammenhang finden könnte, das Readium ist abhängig von: https://github.com/medialize/URI.js/issues/118

Allerdings ist mir noch nicht klar, wie man AMD-Module mit Webpack richtig importiert. Hier ist, was ich meine:

Lassen Sie uns sagen, ich habe ein AMD-Modul definiert in moneyService.amd.js wie folgt aus:

define('myMoneyService', ['jquery'], function($) { 
    //contrived simple example... 
    return function getDollaz() { console.log('$$$'); } 
}); 

Dann in einer Geschwisterdatei, app.js, ich will um diese Datei einzusehen.

//this works 
var getDollaz = require('./moneyService.amd.js'); 

//this works 
require(['./moneyService.amd.js'], function(getDollaz) { getDollaz(); } 

//this does not 
require(['myMoneyService' /*require by its ID vs file name*/], function(getDollaz) { 
    getDollaz(); 
} 

Wenn wir also nicht genannt Module benötigen können, wie würden wir arbeiten mit einer dritten dist Datei Partei lib, die alle hat die Module in einer einzigen Datei gebündelt?

+0

Der erforderliche Anruf, den Sie verwenden, ist im CommonJS-Stil, nicht AMD (RequireJS) Stil. Sie müssen RequireJS in Ihr Skript einfügen, möglicherweise Ihr Modul in define-Methoden (oder Shim-Konfigurationen) einbinden und es mit einem Require-Aufruf initiieren. Es ist ein großer Paradigmenwechsel von CommonJS (aber sauberer, imho) –

+0

@SteveHynding Ich benutze Webpack, und es versteht bereits AMD, CommonJS und (mit babel) ES6. Haben Sie Webpack mit requirejs verwendet oder antworten Sie nur aus einer einzigen Perspektive? –

+0

Was ist die genaue Fehlermeldung, wenn es sagt, dass es ReadiumJS nicht auflösen kann? – kentcdodds

Antwort

1

Ok, es gibt also einen Repo für einen Electron-ePub-Leser mit Readium, der das Webpack verwendet: https://github.com/clebeaupin/readium-electron Dies zeigt eine großartige Möglichkeit, RequireJS-Module mit Webpack zu ziehen.

Eine super tolle Sache, die ich gefunden habe ist, dass Sie output.library und output.libraryTarget angeben können und Webpack wird von einem Modul-Format zu einem anderen transponieren ... verdammt super! Also, ich kann das requirejs Modul importieren, Ausgabebibliothek und libraryTarget auf 'retium-js' bzw. 'commonjs2' setzen, dann kann ich innerhalb meines Anwendungscodes import Readium from 'readium-js';

+0

Ich bin froh, dass es funktioniert hat! Ich kam gerade zurück, um es noch einmal anzusehen. Viel Glück! – kentcdodds

Verwandte Themen