WebPACK motyw ładowarka

Question

Chciałbym wykonać następującą strukturę:

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

wziąć React jako przykład, chciałbym zrobić Następujące w 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>; 
    } 
} 

Innymi słowy, chcę zdefiniować motyw w moim webpack.config.js i załadować ten plik, jeśli istnieje. Jeśli nie, wyrenderuj domyślne zachowanie. Myślę, że to byłaby bardzo potężna konfiguracja!

Szukałem przy tworzeniu niestandardowego programu ładującego, ale bez powodzenia. Czy ktoś może wskazać mi właściwy kierunek?

Answer 1

mam tej pracy przy pisaniu niestandardowy „rozpoznawania nazw”:

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]), 
    ] 
    // ... 
}; 

Próbuje rozwiązać plik z [theme] w swojej drodze na ścieżce z tematem określonym jako zmiennej środowiskowej. Jeśli się nie powiedzie, zamiast tego wróci do domyślnego pliku. W ten sposób mogę wymagać plik tematycznie tak:

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

Głównym elementem okazał się być nieco inna niż w moje pytanie, ale jestem rzeczywiście bardzo zadowolony z niego:

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 } />; 
    } 
} 

logika tego przycisku składnika mogą żyć wewnątrz button.core.jsx, podczas prezentacji będą obsługiwane przez jeden z tych składników:

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 

Nota prawna: Nie używałem tego na dużą skalę ani w środowisku produkcyjnym, ale wydaje się, że działa ono w małym POC. Daj mi znać, jeśli robię coś nierozsądnego!