的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中起作用。请让我知道，如果我做了一件不明智的事情！