Question

说我有以下更高阶的组件：

const FormFactorSensitiveWrapper = function(Component, styleFilePath) {
  // if a style file path is given it means we want to require the style file, appending the device type in the path
  // (i.e. the path might come in as 'styles/performer', so dependent 
  // on the compilation type - desktop vs. mobile - this might
  // be expanded to 'styles/performer.desktop' or 'styles/performer.mobile')
  if (styleFilePath) {
      var formFactor = process.env.formFactor;
      require('styles/' + styleFilePath + '.' + formFactor);        
  }

  const FormFactorSensitive = React.createClass({
      render: function() {
          return <Component {...this.props} formFactor={process.env.formFactor} />
      }
  });

  return FormFactorSensitive;
};

使用所述组件如下：

FormFactorSensitiveWrapper(Home, 'pages/home');

上述目标是动态切换样式文件以使模块需要依赖于我们是否正在编译桌面与移动特定捆绑包。

虽然这种方法可行 - 几乎没有 - 我在捆绑编译+非常臃肿的块中得到非致命的警告，因为webpack似乎无法确定上下文，而是将style文件夹中的所有文件编译到该块中。我尝试过使用require.context的方法，但是有单独的失败（我的webpack.config.js中定义的加载器似乎没有适当地应用）。

编辑我应该注意以下内容也会导致同样的问题（意味着，环境变量的使用不会导致问题）：

const FormFactorSensitiveWrapper = function(Component, styleFilePath) {
  if (styleFilePath) {
      require('styles/' + styleFilePath + '.desktop');        
  }

  const FormFactorSensitive = React.createClass({
      render: function() {
          return <Component {...this.props} />
      }
  });

  return FormFactorSensitive;
};

Answer 1

我觉得问题是动态需求路径，尝试使用更详细的模式：

if (styleFilePath) {
  switch (styleFilePath) {
    case 'blue':
      require('styles/blue.desktop');
    case 'red':
      require('styles/red.desktop');
  }
}

当然这意味着你的所有样式都被导入到这个文件中，这正是webpack正在做的事情，创建一个HERE试图要求动态表达式的所有可能组合（{{1} }）

如果您想使用require context，则需要在webpack 1中使用'styles/' + styleFilePath + '.desktop'或在webpack 2中使用require.ensure。

Webpack动态需要高阶组件中的模块

1 个答案: