Question

我正在开发一个网络应用，我需要本地定义的React组件来覆盖＆＃39; （即优先）默认的公共代码库中的React组件。公共代码库是本地应用程序的依赖项，它提供服务器代码和默认组件。

目标是，如果您需要公共代码库并运行应用程序而不进行任何更改，您将获得应用程序的vanilla版本，但如果您在本地定义组件（例如Logo.jsx），那么应用程序应该使用该版本的Logo.jsx而不是底层代码库中的默认组件。

我的第一个想法是通过在底层代码库中的所有组件中使用动态import语句来解决这个问题，这样在构建时webpack就会查找组件的本地版本，然后在本地版本中包含本地版本。依赖图或者使用回退组件。在伪代码中，我对此解决方案的理想版本看起来像这样：

定义自定义导入语句（importCustomOrDefaultComponent.js）：

function importCustomOrDefaultComponent(name) {
  // check for a component with this name in the local project, and if so, return
  // if no local component exists, return the default component from this repo
}

module.exports = importCustomOrDefaultComponent;

在底层代码库中的所有组件中使用该自定义import语句（例如NavBar组件）：

import React from 'react';
const importCustomOrDefaultComponent = require('../importCustomOrDefaultComponent.js');
const Logo = importCustomOrDefaultComponent('Logo.jsx')

function NavBar () {
  return (
    <div>
       ...
       <Logo />
       ...
    </div>
  );
};

export default NavBar;

我一直在摆弄这个并且似乎不可能像我上面概述的那样做，因为webpack不会让你使用像这样的自定义导入语句来影响它如何构建依赖项。我尝试用{fs＆＃39;}编写importCustomOrDefaultComponent。要查找自定义文件，但这并不起作用，因为webpack试图将函数与其他所有内容捆绑在一起，最终我收到错误，因为＆＃39; fs＆＃39;将无法在浏览器中显示...您似乎只能使用require('xxx')或import xxx from 'xxx'。以上是否可行，如果可以，那importCustomOrDefaultComponent(name)将如何运作？

如果这不能通过源中的自定义导入功能完成，可以通过webpack插件完成吗？我无法找到处理这种情况的任何人。

如果这不起作用，是否有其他模式可以实现我的目标？

我已经研究过代码拆分，但是当它拆分代码时，它似乎没有提供一个解决方案，无法在构建时动态选择是否包含组件A或组件B.
我还考虑过追求一种插件架构，其中自定义组件以redux状态存储，并且可以动态访问客户端，而不是在构建客户端包时尝试做出这些决定。这是一种更好的方法吗？

动态选择使用webpack在构建时加载哪个模块

0 个答案: