Webpack主题加载器

Question

我将完成以下结构：

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

以React为例，我希望在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中定义一个主题，并且如果存在该文件，则加载该文件。如果不存在，则呈现默认行为。我认为这将是一种非常强大的设置！我一直在寻找创建自定义加载器的方法，但迄今为止没有成功。有人能指点我吗？

- Jpunt

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中似乎有效。如果我做了什么不明智的事情，请告诉我！

- Jpunt

---

我在这方面遇到了一个问题。其他插件似乎看不到它。因此，在我的情况下，使用html-webpack-plugin来处理网站图标时，它永远无法解析主题标签。 - Ben

这其实是有道理的，因为此时你并没有要求/导入任何东西。你只是在引用，浏览器会加载网站图标。不过你不能在模板中添加一些逻辑吗？ - Jpunt

这可能是我要做的事情。将上面“我的品牌文件是否存在”的代码模块化，以便我可以在解析器之外使用它。 - Ben