Webpack लोडर

Question

मैं निम्नलिखित संरचना हासिल करना चाहते हैं विषय:

• button.core.jsx
• button.theme-a.jsx
• button.theme-b.jsx

एक उदाहरण के रूप प्रतिक्रिया लेने के लिए, मैं क्या करना चाहते हैं button.core.jsx में निम्नलिखित:

import React from 'react'; 
import Themed from './button.[theme]'; 

export default class Button extends React.Component { 
    render() { 
     if (Themed) { 
      return <Themed />; 
     } 
     return <button>default button</button>; 
    } 
} 

दूसरे शब्दों में, मैं अपने webpack.config.js में एक थीम को परिभाषित करना चाहता हूं और यदि यह मौजूद है तो उस फ़ाइल को लोड करना चाहते हैं। यदि यह नहीं है, तो डिफ़ॉल्ट व्यवहार प्रस्तुत करें। मुझे लगता है कि यह एक बहुत ही शक्तिशाली सेटअप होगा!

मैं कस्टम लोडर बनाने के लिए चारों ओर खोज कर रहा हूं, लेकिन अभी तक कोई सफलता नहीं है। क्या कोई मुझे सही दिशा दिखा सकता है?

Answer 1

मैं एक कस्टम "समाधानकर्ता" लेखन के साथ इस काम कर रहे है:

const ThemeResolver = { 
    apply: function(resolver) { 
     resolver.plugin('file', function(req, cb) { 
      if (req.request.indexOf('[theme]') == -1) { 
       return cb(); 
      } 

      const defaultFile = req.request.replace('[theme]', 'Default'); 
      const themedFile = req.request.replace('[theme]', process.env.THEME); 
      req.request = themedFile; 

      this.doResolve(['file'], req, (err) => { 
       if (!err) { 
        return cb(); 
       } 
       req.request = defaultFile; 
       this.doResolve(['file'], req, cb); 
      }) 
     }); 
    } 
}; 

module.exports = { 
    // ... 
    plugins: [ 
     new webpack.ResolverPlugin([ThemeResolver]), 
    ] 
    // ... 
}; 

यह एक वातावरण चर के रूप में परिभाषित विषय के साथ एक पथ में अपने रास्ते में [theme] के साथ एक फ़ाइल को हल करने की कोशिश करता है। अगर यह विफल हो जाता है, तो यह इसके बजाय एक डिफ़ॉल्ट फ़ाइल में फॉलबैक होगा। इस तरह से मैं इतना की तरह एक थीम पर आधारित फ़ाइल की आवश्यकता होती है सकते हैं:

import Presentation from './button-[theme]'

मुख्य घटक निकला मेरे सवाल में से कुछ भिन्न हो सकता है, लेकिन मैं इसके साथ वास्तव में सुंदर सामग्री हूँ:

import React from 'react'; 
import Presentation from './button-[theme]'; 

export default class Button extends React.Component { 
    onClick = (e) => console.log('some logic'); 

    render() { 
     return <Presentation onClick={ this.onClick } />; 
    } 
} 

इस बटन घटक button.core.jsx के अंदर रह सकते हैं का तर्क है, जबकि प्रस्तुति इन घटकों में से एक द्वारा नियंत्रित किया जाएगा:

THEME=theme-a npm start // button-[theme] resolves to button-theme-a.jsx 
THEME=theme-c npm start // button-[theme] resolves to button-default.jsx 

अस्वीकरण: मैंने इसका उपयोग बड़े पैमाने पर या उत्पादन वातावरण में अभी तक नहीं किया है, लेकिन ऐसा लगता है कि यह एक छोटे पीओसी में काम करता है। अगर मैं कुछ मूर्खतापूर्ण कर रहा हूं तो कृपया मुझे बताएं!