код расщепления с Webpack

Question

Мое текущее описание маршрута выглядит следующим образом для одного из моих маршрутов:

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

Для того, чтобы разделить код для путей маршрутизации Я считаю, код может выглядеть следующим образом:

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

Но что мне не хватает, это функция OnEnter checkAuth, как ее включить?

Answer 1

Если у вас есть checkAuth в ./AuthenticationContainer.js, то переместите его на routes.js или создайте новый файл js и потребуйте его в routes.js. В принципе, функция, которая должна быть запущена на крюке onEnter, должна присутствовать перед требованием компонента с использованием getComponent.

Мои routes.js выглядит 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) 
      }) 
     } 
     }] 
    }] 
    } 
}; 

Я не уверен, если вы можете вызвать checkAuth внутри require.ensure и остановить компонент не запускался, если она не прошла проверку подлинности. По дизайну это плохой подход, так как вы загружаете компонент, а затем проверяете, проверена ли она. Это отрицает преимущества разделения кода.

Edit - Добавление webpack.config.js

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 построить выход -

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