Niejawne dzielenie kodów za pomocą pakietu internetowego, routera reagującego na pakowarkę

Question

Edycja2: Edytowano wyrażenie regularne w celu dopasowania ścieżek do pliku okna, a podział kodu jest teraz wykonywany. Ale moje komponenty potomne mojej ścieżki głównej nadal nie będą się ładować.

Edit: Mój kod nie zmieniło od zeszłego tygodnia, ale nadal jestem zakleszczony na ten problem (i muszę zadeklarować swoje trasy w sposób deklaratywny, więc korzystanie JSX).

Przede wszystkim używam Webpack 1.x z React, React-Router, Bundle-Loader, Babel6, ES6 i airbnb-eslint-config.

Próbowałem następujące Henley Edition's article o dzielenie kodu i kawałki ładowania (z jego example repo), w oparciu o React's huge app example.

Ale nie udało się dokonać bundle-loader podzielić mój kod na kawałki ...

Oto mój kod:

webpack.config.js

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

const nodeDir = `${__dirname}/node_modules`; 

const routeComponentRegex = /src[\/\\]views[\/\\]([^\/\\]+)[\/\\]js[\/\\]([^\/\\]+).js$/; 
const paths = [ // Only to test which files match the regex, juste in case 
    'src/views/index/js/Index.js', 
    'src/views/login-page/js/LoginForm.js', 
    'src/common/main-content/js/MainContent.js', 
    'src/routes/main.js', 
]; 

console.log(routeComponentRegex.test(paths[0])); // prints 'true' 
console.log(routeComponentRegex.test(paths[1])); // prints 'true' 
console.log(routeComponentRegex.test(paths[2])); // prints 'false' 
console.log(routeComponentRegex.test(paths[3])); // prints 'false' 

const config = { 
    resolve: { 
    alias: { 
     react: `${nodeDir}/react`, 
     'react-dom': `${nodeDir}/react-dom`, 
     'react-router': `${nodeDir}/react-router`, 
     'react-fetch': `${nodeDir}/react-fetch`, 
     'react-cookie': `${nodeDir}/react-cookie`, 
     'react-bootstrap': `${nodeDir}/react-bootstrap`, 
     'react-bootstrap-daterangepicker': `${nodeDir}/react-bootstrap-daterangepicker`, 
     'react-bootstrap-datetimepicker': `${nodeDir}/react-bootstrap-datetimepicker`, 
     velocity: `${nodeDir}/velocity-animate`, 
     moment: `${nodeDir}/moment`, 
     slimscroll: `${nodeDir}/slimscroll`, 
    }, 
    }, 
    entry: { 
    app: './client/src/routes/js/main', 
    vendors: [ 
     'react', 'react-dom', 
     'react-router', 'react-fetch', 'react-cookie', 
     'react-bootstrap', 'react-bootstrap-daterangepicker', 'react-bootstrap-datetimepicker', 
     'velocity', 'moment', 'slimscroll', 
    ], 
    }, 
    output: { 
    path: path.join(__dirname, 'public/dist'), 
    publicPath: '/dist/', 
    filename: 'bundles/[name].bundle.js', 
    chunkFilename: 'chunks/[name].chunk.js', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     include: path.join(__dirname, 'client'), 
     exclude: routeComponentRegex, 
     loader: 'babel', 
     }, 
     { 
     test: /\.css$/, 
     include: path.join(__dirname, 'client'), 
     exclude: routeComponentRegex, 
     loader: 'style!css-loader?modules&importLoaders=1' + 
     '&localIdentName=[name]__[local]___[hash:base64:5]', 
     }, 
     { 
     test: routeComponentRegex, 
     include: path.join(__dirname, 'client'), 
     loaders: ['bundle?lazy', 'babel'], 
     }, 
    ], 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin('vendors', 'bundles/vendors.js', Infinity), 
    ], 
}; 

module.exports = config; 

klient/src/views/main-content/js/MainContent.js

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

const MainContent = (props) => (
    <div> 
     <h1>App</h1> 
     <ul> 
     <li><Link to="/login">Login</Link></li> 
     </ul> 
     {props.children} 
    </div> 
); 

MainContent.propTypes = { 
    children: React.PropTypes.node.isRequired, 
}; 

export default MainContent; 

publiczny/src/views/index/js/Index.js

import React from 'react'; 

const Index =() => (
    <h2>Index Page</h2> 
); 

export default Index; 

publiczny/src/views/login/js/Login.js

import React from 'react'; 

const LoginForm =() => (
    <div className="box box-default"> 
    <h2>Login Page</h2> 
    </div> 
); 

export default LoginForm; 

Punkt wejścia (klient/src/routes/main.js):

import React from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 

import MainContent from '../../common/main-content/js/MainContent'; 

// modules supposed to be loaded lazily 
import Index from '../../views/index/js/Index'; 
import Login from '../../views/login/js/Login'; 
import ShortOffers from '../../views/short-offers/js/ShortOffers'; 
import CreateJobOffer from '../../views/create-job-offer/js/CreateJobOffer'; 

function lazyLoadComponent(lazyModule) { 
    return (location, cb) => { 
    lazyModule(module => { 
     cb(null, module); 
    }); 
    }; 
} 

function lazyLoadComponents(lazyModules) { 
    return (location, cb) => { 
    const moduleKeys = Object.keys(lazyModules); 
    const promises = moduleKeys.map(key => 
     new Promise(resolve => lazyModules[key](resolve)) 
    ); 

    Promise.all(promises).then(modules => { 
     cb(null, modules.reduce((obj, module, i) => { 
     obj[moduleKeys[i]] = module; 
     return obj; 
     }, {})); 
    }); 
    }; 
} 

render((
    <Router history={browserHistory}> 
    <Route path="/" component={MainContent}> 
     <IndexRoute getComponent={lazyLoadComponent(Index)} /> 
     <Route path="short-offers" getComponent={lazyLoadComponent(ShortOffers)} /> 
     <Route path="create-job-offer" getComponent={lazyLoadComponent(CreateJobOffer)} /> 
    </Route> 
    <Route path="login" getComponent={lazyLoadComponent(Login)} /> 
    </Router> 
), document.getElementById('content')); 

Teraz webpack „s Wyjście:

Hash: a885854f956aa8d2a00c 
Version: webpack 1.13.0 
Time: 6321ms 
       Asset  Size Chunks    Chunk Names 
bundles/app.bundle.js 84.7 kB  0 [emitted] app 
    bundles/vendors.js 2.55 MB  1 [emitted] vendors 
chunk {0} bundles/app.bundle.js (app) 89 kB {1} [rendered] 
    [0] multi app 28 bytes {0} [built] 
    + 26 hidden modules 
chunk {1} bundles/vendors.js (vendors) 2.45 MB [rendered] 
    [0] multi vendors 148 bytes {1} [built] 
    + 626 hidden modules 

See, żadne pakiety :(Jeśli dobrze zrozumiałem, trzeci ładowarka w webpack.config.js powinien dbać o plikach importowanych w plikach .js i uczynić z nich chunks, więc mogą one być załadowany dynamically (and lazily).

Ponadto moje strony nie ładują się. Gdybym wyjąć podziału kodu z obrazka, to działa:

render((
    <Router history={browserHistory}> 
    <Route path="/" component={MainContent}> 
     <IndexRoute component={Index} /> 
     <Route path="short-offers" getComponent={ShortOffers} /> 
     <Route path="create-job-offer" getComponent={CreateJobOffer} /> 
    </Route> 
    <Route path="login" getComponent={LoginPage} /> 
    </Router> 
), document.getElementById('content')); 

Ale moja aplikacja będzie ogromny i absolutnie potrzebne dzielenie kodu.

Czy ktoś mógłby poprosić mnie o jakiś wgląd?

Z góry dziękuję!

Answer 1

Autor artykułu tutaj. Spróbuj po prostu uruchomić npm start (uruchamia serwer dev) lub webpack -c webpack.config.js (wyświetla pliki do katalogu __build__). Myślę, że właśnie zapomniałeś wskazać plecak w poprawnym pliku konfiguracyjnym.

Answer 2

użycie module.exports zamiast export default

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

const MainContent = (props) => (
    <div> 
     <h1>App</h1> 
     <ul> 
     <li><Link to="/login">Login</Link></li> 
     </ul> 
     {props.children} 
    </div> 
); 

MainContent.propTypes = { 
    children: React.PropTypes.node.isRequired, 
}; 

module.exports = MainContent; 

lub lepiej wykorzystywać babel-plugin-add-module-exports wtyczki będzie przekształcać

// index.js 
export default 'foo' 

do

'use strict'; 
Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 
exports.default = 'foo';