Wie erstellt Const in einer Schleife für require.ensure?

Question

So verwende ich react-router zusammen mit require.ensure und Webpack, um meine Routen zu chunk out. Dies hat sich jedoch von vorformulierten in einem viel Folge:

const getTermsAndConditions = (nextState, cb) => { 
    require.ensure([], require => { 
    cb(null, require('../containers/TermsAndConditions/TermsAndConditions')) 
    }, 'terms') 
} 
const getThread = (nextState, cb) => { 
    require.ensure([], require => { 
    cb(null, require('../components/Thread/Thread')) 
    }, 'inbox') 
} 
const getPrivacyPolicy = (nextState, cb) => { 
    require.ensure([], require => { 
    cb(null, require('../containers/PrivacyPolicy/PrivacyPolicy')) 
    }, 'privacy-policy') 
} 

Ich habe etwa 25 dieser Erklärungen in einer Reihe, und dann in der eigentlichen Render-Funktion:

<Route path='privacy' getComponent={getPrivacyPolicy} /> 
...etc 

ich nicht Denken Sie daran, dass die Routen fest codiert sind, da sie eine gute Vorstellung vom Gesamtlayout der Anwendung geben, aber ich möchte das Muster für die Typenkennzeichen getPrivacyPolicy reduzieren. Wie kann ich das machen?

EDIT: Ich habe genommen, nachdem @ Michael Jungo Antwort haben, aber das Ergebnis der getComponentFactory produziert Funktionen gefunden, die noch var Namen in sich haben, nicht fest einprogrammiert Saiten.

ZB:

const PrivacyPolicy = getComponentFactory('../containers/PrivacyPolicy/PrivacyPolicy', 'privacy-policy') 

Und dann console.log(PrivacyPolicy) kehrt:

PrivacyPolicy: function (nextState, cb) { 
    require.ensure([], function (require) { 
    return cb(null, require(path)) 
    }, chunkName) 
} 

So beide path und chunkName nicht durch ihre tatsächlichen String-Werte ersetzt ...

Answer 1

Leider können Sie‘ t reduzieren den Code wirklich mehr, weil require und require.ensure String-Literal erhalten müssen s, Variablen werden nicht funktionieren. Es muss zur Kompilierzeit ohne Programmablaufanalyse bekannt sein. Diese getComponent Funktionen enthalten nur die require.ensure-Anweisung, so dass Sie stecken alle explizit schreiben.

---

Alte Antwort

Du hast recht, das ist eine Menge von vorformulierten, aber es ist sehr einfach loswerden die meisten davon zu bekommen, weil man so ziemlich ist nur den gleichen Code zu duplizieren mit unterschiedlichem Argumente.

Bevor Sie in den Code einsteigen, ist es wichtig zu wissen, dass Funktionen erstklassige Bürger in JavaScript sind. Das heißt, Sie können eine Funktion als Parameter verwenden, einen Wert zurückgeben und ihn einer Variablen zuweisen, genau wie jeder andere Wert auch. Genau das haben Sie getan, Sie haben function expression verwendet und einer Variablen zugewiesen (z. B. getPrivacyPolicy). Nun, Sie haben arrow functions verwendet, was eine spezielle Syntax für Funktionsausdrücke ist (mit einigen Unterschieden, wie in der Dokumentation gezeigt). Die Variable dient nur dazu, einen Verweis darauf zu haben, den Sie später verwenden können. Sie benötigen diese Referenzen nicht unbedingt, und Sie können sie direkt an das Attribut getComponent übergeben.

In diesem Sinne können Sie beginnen, Ihre Funktionen zu refaktorieren. In Ihren Funktionen ist alles gleich, außer für die path, die Sie benötigen, und die chunkName. Daher werden Sie eine Funktion erstellen, die path und chunkName als Parameter und eine neue Funktion zurückgibt, die in getComponent verwendet wird.

const getComponentFactory = (path, chunkName) => { 
    // Return the function that will be passed to getComponent 
    return (nextState, cb) => { 
    require.ensure([], require => cb(null, require(path)), chunkName); 
    }; 
} 

Jetzt können Sie ganz einfach die Funktionen, die Sie durch den Aufruf getComponentFactory zum Beispiel haben erstellen:

const getThread = getComponentFactory('../components/Thread/Thread', 'inbox'); 

Und wie bereits erwähnt, bevor Sie wirklich nicht, diese Funktion zu einer Variablen zugewiesen werden müssen, aber Sie kann es in Ihrem Route direkt verwenden, wenn Sie wollen:

<Route 
    path='inbox' 
    getComponent={getComponentFactory('../components/Thread/Thread', 'inbox')} 
/> 

Hinweis: vergessen Sie nicht den Unterschied zwischen einem Spaß Aufruf ction und übergeben es.

console.log(func);  // The function func is printed 
console.log(func(args)); // The return value of func is printed