reactjs - react : Conditionally required CSS file always included in build

Question

出于测试目的，我包含了一个禁用某些 CSS 类动画的 CSS 文件，它用于 differencify测试不会产生虚假差异。仅当设置了某些环境变量时才会包含此 CSS 文件:

if (process.env.REACT_APP_BACKEND_URL === 'localhost') {
  // Use a fixed clock against local backend
  moment.now = () => 1558396800000;

  // Disable animations when running localcd to avoid diff on visual tests
  if (process.env.REACT_APP_DISABLE_ANIMATIONS === 'true') {
    require('./disable-animations.css');
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

这在本地运行时完美运行，当后端为 localhost 时动画被禁用并在针对其他后端运行时启用。但出于某种原因，动画在使用 react-scripts build 构建的已部署代码中也被禁用。 . moment.now() 没有在内置代码中被覆盖，所以看起来 react-scripts build将包括传递给 require() 的所有资源不管他们的条件？有没有办法避免这种情况？有没有更好的方法来实现这一点？

Answer 1

if (process.env.REACT_APP_DISABLE_ANIMATIONS === 'true') {
  require('./disable-animations.css');
}

在上面的if条件中，求值是动态的，编译器不知道这是一个编译时指令，它只会在运行时才知道求值。

如果使用 webpack，有一种方法可以告诉编译器这是一个构建时间常量，一个例子是 process.env.NODE_ENV，编译器将在构建时评估这个值时间而不是运行时间。它通过用它的值替换 NODE_ENV 中的内容来实现这一点，例如。

if (process.env.NODE_ENV !== 'production') {
  require('./disable-animations.css');
}

在生产过程中，上面的内容实际上会转换为 ->

if ('production' !== 'production') {
  require('./disable-animations.css');
}

因此 require('./disable-animations.css'); 将从构建中排除。

如果您想使用更复杂的构建时间常量，还有 https://webpack.js.org/plugins/define-plugin/ ，有了这个，您可以拥有比开发和生产更好的控制，例如。您可能需要启用日志记录等的生产构建。