2017-04-20 3 views
0

Ich verwende Web Pack, um eine Bibliothek zu packen. Wir haben mehrere ES6 Klassen, in dieser Art und Weise:So unterscheiden Sie zwischen privaten und öffentlichen Klassen in Webpack

/src/Lib.js

import HelperClass from './HelperClass.js'; 
class Lib { 
    method1() {...} 
} 

/src/HelperClass.js

class HelperClass { 
    doSth() {...} 
} 

Verpackung mit webpack Werke, Wir enden mit einer Datei lib.js, die Lib und HelperClass wie var Lib = ... enthält.

Wie kann ich die HelperClass aus dem globalen Namespace mit Webpack ausblenden (z. B. eine private Klasse machen)?

UPDATE:

nun in ein Problem Ich laufe mit dem helperClass Import! Ich lud ein Beispielprojekt https://github.com/benmarten/webpack_es6_test

Diese Zeile:

__WEBPACK_IMPORTED_MODULE_0__Helper_js___default.a.doSth(); 

Ergebnisse in:

[Error] TypeError: __WEBPACK_IMPORTED_MODULE_0__Helper_js___default.a.doSth is not a function. (In '__WEBPACK_IMPORTED_MODULE_0__Helper_js___default.a.doSth()', '__WEBPACK_IMPORTED_MODULE_0__Helper_js___default.a.doSth' is undefined) 
method1 (lib.js:92) 
Global Code (index.htm:6) 
+0

Webpack legen nur das frei, was Sie vom Einstiegspunkt exportieren, und in dem Beispiel, das Sie angegeben haben, gibt es keinen Export, daher wird nichts angezeigt. Außerdem exportiert Ihre 'HelperClass.js' auch nichts, so dass Sie sie nicht in' Lib.js' importieren könnten. Bitte geben Sie einen [MCVE] (https://stackoverflow.com/help/mcve) an. –

+0

Gotya, lass mich das in einer Beispiel-App testen. thx;) –

+0

Aktualisiert, bitte einen Blick, es funktioniert nur auf halbem Weg .... –

Antwort

1

Wenn eine Bibliothek mit webpack Erstellen Sie alles machen, die in Ihrem Einstiegspunkt exportiert wird, alles andere ist nicht von außen zugänglich, aber Sie können es in Ihrem Code verwenden. Wenn Sie etwas aus einer anderen Datei verwenden möchten, müssen Sie es dennoch exportieren, da es sich bei den Dateien immer noch um Module handelt. Nur weil es einen Export gibt, heißt das nicht, dass es global wird. Nur die Exporte in dem in webpack.config.js angegebenen Eintrag werden offen gelegt.

Export der Helfer in HelperClass.js:

class Helper { 
    static doSth() { 
    console.log('helper:doSth'); 
    } 
} 

export default Helper; 

Dann importieren Sie es in Lib.js:

import Helper from './HelperClass.js'; 

class Lib { 
    static method1() { 
    Helper.doSth(); 
    } 
} 

export default Lib; 

Nun ist die Standard-Export Ihres Bündels wird die Lib Klasse und Sie können Helper Inneren verwenden, ohne es auszusetzen.

Sie sollten auch die Authoring Libraries Guides lesen.

+0

Danke, 'Export default Helper;' löste es. Jetzt ist das einzige Problem, das ich habe, dass ich nur mit 'lib.default.method1(); auf meine Bibliothek zugreifen kann, aber idealerweise will ich es sein:' lib.method1(); 'Irgendwelche Ideen? –

+0

Leider deckt der Authoring Libraries Guide nur den Fall der 'export function' ab, nicht exclusive es6 classes;) –

+0

Es ist buchstäblich die gleiche Sache, vielleicht möchten Sie [Exploring ES6 - Die Grundlagen von ES6 Modulen] (http: // exploringjs .com/es6/ch_module.html # sec_basics-of-es6-modules) um das Modulsystem zu verstehen. Auch dies ist kein Java, verwende keine Klassen überall. Eine freie Funktion ist in den meisten Fällen viel geeigneter als eine statische Methode. Dann können Sie einen benannten Export wie in der Webpack-Dokumentation verwenden. Aber wenn Sie darauf bestehen, Klassen zu verwenden, können Sie folgendes verwenden: 'export const method1 = Lib.method1;', dadurch verlieren Sie den Kontext von 'this' und es ist gleichbedeutend mit der Definition einer regulären Funktion an erster Stelle. –

Verwandte Themen