时间戳

首页 > 解决方案 > Webpack、babel 和 react：从生产构建中删除某些类名

reactjs - Webpack、babel 和 react：从生产构建中删除某些类名

问题描述

在我的项目中，我使用以“u-”开头的特殊类型的类名，例如“u-title_bar”，用于单元测试。我想将它们从生产版本中删除，是否有这样做的工具？

// MyComponent.jsx
// u-my_comp is just for unit testing. my_comp is for styling
const MyComponent = () => <div className="u-my_comp my_comp">My Component</div>

// MyComponent.test.jsx
expect(myComponent.find('.u-my_comp).text()).toEqual('My Component');

// Expected result after cleanup: 
<div className="my_comp">My Component</div>

标签： reactjswebpackbabeljs

解决方案

只能使用自定义 Babel 转换来检测这些类名，并且对于动态类名会失败。

如果需要删除所有u-类，则应创建一个助手：

const prodClassNames = (...classNames) => classNames
  .reduce((classNames, className) => classNames.concat(className.split(/\s+/)), [])
  .filter(className => process.env.NODE_ENV !== 'production' || !/^u-/.test(className))
  .join(' ');

可用作：

<div className={prodClassNames('u-my_comp my_comp')}>My Component</div>

或者：

<div className={prodClassNames('u-my_comp', 'my_comp')}>My Component</div>

推荐阅读