संपादित 2: विंडो के फ़ाइल पथ से मेल खाने के लिए रेगेक्स संपादित किया गया और कोड विभाजन अब हो रहा है। लेकिन मेरे रूट रूट के लिए मेरे बच्चे के घटक अभी भी लोड नहीं होंगे।वेबपैक के साथ स्पष्ट रूप से कोड-विभाजन, बंडल-लोडर प्रतिक्रिया-राउटर
संपादित करें: मेरा कोड पिछले हफ्ते से बदल गया है, लेकिन मैं अभी भी उस समस्या पर फंस गया हूं (और मुझे घोषणात्मक तरीके से अपने मार्ग घोषित करने की आवश्यकता है, इसलिए जेएसएक्स का उपयोग करना)।
सबसे पहले, मैं प्रतिक्रिया, प्रतिक्रिया-राउटर, बंडल-लोडर, Babel6, ES6 और airbnb-eslint-config के साथ वेबपैक 1.x का उपयोग कर रहा हूं।
मैंने Henley Edition's article को React's huge app example के आधार पर कोड-विभाजन और लोडिंग हिस्सों के साथ (example repo के साथ) का पालन करने का प्रयास किया।
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;
क्लाइंट /:
लेकिन मैं bundle-loader टुकड़ों में मेरी कोड विभाजित करने के लिए प्रबंधन नहीं कर सके ...
यहाँ मेरी कोड है src/विचारों/मुख्य सामग्री/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;
सार्वजनिक/src/विचारों/सूचकांक/js/Index.js
import React from 'react';
const Index =() => (
<h2>Index Page</h2>
);
export default Index;
सार्वजनिक/src/विचारों/लॉगिन/js/Login.js
import React from 'react';
const LoginForm =() => (
<div className="box box-default">
<h2>Login Page</h2>
</div>
);
export default LoginForm;
प्रवेश बिंदु (ग्राहक/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'));
अब webpack के उत्पादन:
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
देखें, कोई बंडलों :(वे अगर मैं अच्छी तरह से समझ, webpack.config.js में तीसरे लोडर .js फ़ाइलों में आयात की गई फ़ाइलें की देखभाल और उन्हें chunks में बनाना चाहिए, इसलिए हो सकता है लोड dynamically (and lazily)।
इसके अतिरिक्त, मेरी पृष्ठों को लोड नहीं है। अगर मैं तस्वीर से बाहर कोड बंटवारे बाहर ले, यह काम करता है:
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'));
लेकिन, मेरे ऐप विशाल होने वाला है और मैं पूरी तरह से कोड-बंटवारे की जरूरत है।
क्या कोई मुझे देने के लिए अंतर्दृष्टि का एक टुकड़ा रखेगा?
अग्रिम धन्यवाद!
नमस्ते, धन्यवाद
बदलना होगा, लेकिन मैं केवल एक webpack है। config.js फ़ाइल ... मैंने वैसे भी कोशिश की, लेकिन भाग्य के बिना। मैंने मूल प्रतिक्रिया के विशाल ऐप उदाहरण के तरीके को अपनाया है, वैसे भी धन्यवाद! – Zephir77167
हैलो। मेरे पास मेरे कोड में अपना रास्ता लागू करने के अलावा कोई विकल्प नहीं है (जो कि अच्छा है क्योंकि मुझे जेएसएक्स के घोषणात्मक तरीके से प्यार है)। मैंने अपना कोड अपडेट किया, क्या आप कृपया एक नज़र डालें? आपका बहुत बहुत धन्यवाद! – Zephir77167