Question

在我的项目中，我使用以'u-'开头的特殊类型的className，例如'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>

Answer 1

仅通过自定义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>

Webpack，babel和react：从生产版本中删除某些类名

1 个答案: