Wie durch dynamischen Pfad importieren mit Meteor

Question

Dies ist, wie ich all Sammlung Erklärungen mit Methoden, Vorrichtungen und Publikationen importiere jetzt:

import './news/collection.js'; 
import './news/methods.js'; 

if (Meteor.isServer) { 
    import './news/server/fixtures.js'; 
    import './news/server/publications.js'; 
} 

Wenn Sie einige neue Sammlung, man muss es wieder schreiben:

import './comments/collection.js'; 
import './comments/methods.js'; 

if (Meteor.isServer) { 
    import './comments/server/fixtures.js'; 
    import './comments/server/publications.js'; 
} 

Wenn Sie Tonnen von Sammlungen haben, müssen Sie es immer wieder schreiben. Schließlich im Interesse der DRY würden Sie so etwas schreiben:

let collections = ['news', 'comments', ... 'everything']; 

for (let collection of collections) { 
    import `./${collection}/collection.js`; 
    import `./${collection}/methods.js`; 
    if (Meteor.isServer) { 
    import `./${collection}/server/fixtures.js`; 
    import `./${collection}/server/publications.js`; 
    } 
} 

Jetzt The Unexpected token, expected { Fehler auslöst.

Ich suchte Meteor Dokumentation und kann es nicht glauben: Ist es wirklich keine Möglichkeit, etwas mit dynamischen Weg mit Meteor zu importieren?

Answer 1

Dynamische Importe werden nicht unterstützt. Es gibt viele Menschen, die dies tun möchten (ich eingeschlossen), aber es ist noch nicht verfügbar, entweder in Meteor oder anderswo, als Import eine ES6 Funktion ist

Answer 2

es6 nicht dynamische Importe nicht unterstützt (siehe Importing modules using ES6 syntax and dynamic path)

Sie können jedoch dynamische Import verwenden mit CommonJS style requiring in Meteor

so etwas wie dies funktionieren sollte:

let collections = ['news', 'comments', ... 'everything']; 

for (let collection of collections) { 
    require(`./${collection}/collection.js`); 
    require(`./${collection}/methods.js`); 
    if (Meteor.isServer) { 
    require(`./${collection}/server/fixtures.js`); 
    require(`./${collection}/server/publications.js`); 
    } 
} 

Answer 3

dynamische Importe werden nicht unterstützt.

Allerdings sieht dies wie ein Anti-Muster. Einer der Vorteile des manuellen Ladens Ihrer Module (im Gegensatz zum alten Stil Meteor 'eager loading') ist, dass es, weil es explizit ist, ist es einfach zu sehen, woher der importierte Code stammt.

Es ist auch wichtig, Ihre Importe zu minimieren, indem Sie nicht alles in großen Mengen importieren, sodass Sie die Abhängigkeiten in Ihrem Code sehen können.

das heißt, wenn ich dieses Moduls an api ändern, kann ich für den anderen Modulen suchen, die sie importieren und aktualisieren die

alle Module Müssen alle Sammlungen zuzugreifen und ihre Methoden, Spiele, Publikationen?

Die meiste Zeit, anstatt Meteor.isServer zu verwenden, sollten Sie diesen Code in ein Verzeichnis /server verschieben. Wenn Code geteilt ist, können Sie require als documented here

Es verwenden andere Muster sind (das heißt Code Splitting), die von dynamischer Belastung profitieren, aber ich denke, dass Sie zu minimieren Ihre Importe von der Suche besser sein.

Answer 4

dynamische Importe sind jetzt nach 1,5 gestrigen Veröffentlichung von Meteor unterstützt

ich gerade einen Artikel über schrieb, wie dies zu tun und, was noch wichtiger ist, wann und warum dies zu tun.

https://code.zeroasterisk.com/2017/05/meteor-1-5-bundle-optimization/

TL; DR: import('./my_component') ein Versprechen gibt, die aufgelöst wird, wenn der Client hat.

vor: normal Import Teil client Bündel

import PickDates from './PickDates'; 

nach: dynamischer Import nicht mehr Teil von client Bündeln

import Loader from 'react-loader'; 

// generic loading component to show while transfering section of code 
const LoadingComponent =() => <span className="text-muted"><i className="fa fa-refresh" /></span>; 
// new version of the component, now: loading --> rendered 
const PickDates = Loader({ 
    // this does the dynamic import, and returns a promise 
    loader:() => import('./PickDates'), 
    // this is our generic loading display (optional) 
    LoadingComponent, 
    // this is a delay before we decide to show our LoadingComponent (optional) 
    delay: 200, 
});