与 Webpack 反应：PropTypes 出现在最终包中答案

【问题标题】：React with Webpack: PropTypes appearing in final bundle与 Webpack 反应：PropTypes 出现在最终包中
【发布时间】：2016-04-18 15:53:54
【问题描述】：

每React's documentation on PropTypes:

请注意，出于性能原因，propTypes 仅在开发模式下检查。

但是，当我使用 Webpack 构建我的应用程序时，我看到我定义的 propTypes 仍在最终包中。

我将 NODE_ENV 设置为生产。这是预期的行为吗？

我的理论：

PropTypes 验证被跳过，尽管 PropType 定义仍在生产代码中。如果这个理论是正确的，那么在 prod 代码中剥离 PropTypes 是否有任何最佳实践？

【问题讨论】：

标签： reactjs webpack

【解决方案1】：

做到这一点的 Babel 插件：

https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types

【讨论】：

【解决方案2】：

您自己的组件上的propTypes 确实保留在所有构建中，但在将NODE_ENV 设置为production 的React 构建时未验证。

您可以做的是以“oldschool”方式（而不是类属性）定义您的 propTypes，并有条件地执行此操作。

class MyComponent extends React.Component {
    render() { ... }
}

if (process.env.NODE_ENV !== 'production') {
    MyComponent.propTypes = {
        text: React.PropTypes.string.isRequired,
    };
}

如果你使用DefinePlugin，Webpack 会将 if 评估为 if (false) { ... }，然后 Uglify 会完全删除它。

它并没有让代码变得更漂亮，而且你不能提取行为，因为它必须是明确的 Webpack 和 Uglify 才能进行删除，但它确实有效。

例如，另一个更高级的选项是编写自己的 Babel 插件。有one out there，但它已经快一年没有更新了，所以我怀疑它是否仍然适用于 Babel 6。虽然它并不复杂，并且可能是一个有趣的练习。

【讨论】：

Babel 插件路线似乎是最好的选择。当我有空闲时间时，我会试一试。
我很想知道你会做些什么，听起来像是一个用于缩小 React 应用程序的有用插件！
完成！来自bloodyowl的那个是一个非常方便的参考！ github.com/avindra/react-strip-proptypes你怎么看？

【解决方案3】：

面临同样的问题。 babel 插件https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types 对我不起作用（不支持打字稿）。

我发现的更好的“肮脏黑客”：

MyComponent['propTypes'] = {...};

【讨论】：

作为Babel supports Typescript，你可以切换到Babel编译并使用插件。如果您仍想强制执行类型检查，您可以运行 tsc 作为附加步骤。