的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 

免責聲明：我沒有在大規模或生產環境中使用它，但它似乎在小型POC中起作用。請讓我知道，如果我做了一件不明智的事情！