-Code Spaltung mit Webpack

Question

Meine aktuelle Routenbeschreibung für eine meiner Routen folgt aussieht:

<Route path='auth' component = {AuthenticateContainer} onEnter = {checkAuth}/> 

Um Code zu teilen für die Routenpfade ich den Code beleive kann wie folgt aussieht:

   <Route path="auth" getComponent={(nextState, callback) => { 
        require.ensure([], function(require) { 
         callback(null, require('./AuthenticateContainer.js').default); 
        }) 
       }}/> 

Aber was ich vermisse ist die OnEnter checkAuth Funktion, wie kann ich sie einbeziehen?

Answer 1

Wenn Sie checkAuth in ./AuthenticationContainer.js haben, dann verschieben Sie es zu routes.js oder erstellen Sie eine neue js-Datei und fordern Sie es in routes.js. Grundsätzlich muss die Funktion, die auf dem Haken onEnter ausgeführt werden soll, vorhanden sein, bevor die Komponente getComponent benötigt wird.

sieht mein routes.js wie this-

import React from 'react'; 
import { Route } from 'react-router'; 

export default (store) => { 
    function requireAuth(nextState, replace) { 
    if(!store.getState().auth.isAuthenticated) { 
     replace({ 
     pathname: '/', 
     state: { nextPathname: nextState.location.pathname } 
     }) 
    } 
    } 

    return { childRoutes: [{ 
     path: '/', 
     getComponents(location, callback) { 
     require.ensure(['./containers/App/App.jsx'], function (require) { 
      callback(null, require('./containers/App/App.jsx').default) 
     }) 
     }, 
     childRoutes: [{ 
     path: 'about', 
     onEnter: requireAuth, 
     getComponents(location, callback) { 
      require.ensure(['./containers/About/About.jsx'], function (require) { 
       callback(null, require('./containers/About/About.jsx').default) 
      }) 
     } 
     }] 
    }] 
    } 
}; 

Ich bin nicht sicher, ob Sie es geladen checkAuth innerhalb require.ensure und stoppen Sie die Komponente aus wird anrufen, wenn nicht authentifiziert ist. Dies ist ein schlechter Ansatz, da Sie die Komponente laden und dann überprüfen, ob sie authentifiziert ist. Dies negiert die Vorteile der Codeaufteilung.

Bearbeiten - webpack.config.js

Hinzufügen

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'build'); 
var APP_DIR = path.resolve(__dirname, 'src'); 

var config = { 
    entry: APP_DIR + '/index.jsx', 

    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js', 
    chunkFilename: '[id].chunk.js', 
    }, 

    devtool: 'inline-source-map', 

    module : { 
    loaders : [ 
     { 
     test : /\.jsx?/, 
     include : APP_DIR, 
     loader : 'babel' 
     }, 
     { 
     test: /\.css?$/, 
     loaders: [ 'style', 'raw' ], 
     include: __dirname 
     } 
    ] 
    }, 

    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin('shared.js') 
    ] 
}; 

module.exports = config; 

Webpack Ausgang bauen -

webpack -d --watch 

Hash: 08b101d1e95f7633adb4 
Version: webpack 1.13.2 
Time: 2680ms 
     Asset  Size Chunks    Chunk Names 
    bundle.js 1.05 MB 0, 3 [emitted] main 
    1.chunk.js 4.15 kB 1, 3 [emitted] 
    2.chunk.js 3.19 kB 2, 3 [emitted] 
    shared.js 3.66 kB  3 [emitted] shared.js 
bundle.js.map 1.16 MB 0, 3 [emitted] main 
1.chunk.js.map 2.32 kB 1, 3 [emitted] 
2.chunk.js.map 1.18 kB 2, 3 [emitted] 
shared.js.map 3.67 kB  3 [emitted] shared.js 
    + 269 hidden modules