Question

每React's documentation on PropTypes：

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

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

我正在将NODE_ENV设置为生产。预期会出现这种情况吗？

我的理论：

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

Answer 1

实现这一伎俩的Babel插件：

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

Answer 2

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

你可以做的是在'oldschool＆＃39;中定义你的propTypes。方式（不是类属性），并有条件地执行。

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

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

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

它并没有使代码更加美观，你无法提取行为，因为它必须明确Webpack和Uglify进行删除，但它有效。

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

Answer 3

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

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

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

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

3 个答案: