React with Webpack:PropTypes出现在最终包中

7eumitmz  于 12个月前  发布在  Webpack
关注(0)|答案(3)|浏览(110)

根据React关于PropTypes的文档:
请注意,出于性能原因,propTypes仅在开发模式下检查。
然而,当我用Webpack构建我的应用程序时,我看到我定义的propType仍然在最终的bundle中。
我正在将NODE_ENV设置为生产环境。这种行为是预期的吗?
我的理论是:
PropTypes验证被跳过,尽管PropType定义仍然在生产代码中。如果这个理论是正确的,那么有没有在生产代码中剥离PropType的最佳实践?

dnph8jn4

dnph8jn42#

您自己组件上的propTypes确实保留在所有构建中,但在构建React时将NODE_ENV设置为production时不会进行验证。
你可以做的是用“老派”的方式定义你的propType(而不是作为类属性),并且有条件地这样做。

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

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

字符串
如果您使用DefinePlugin,Webpack将评估是否为if (false) { ... },然后Uglify将完全删除它。
它并没有使代码变得更漂亮,你不能提取行为,因为它必须是明确的Webpack和Uglify做删除,但它工作。
另一个更高级的选择是编写自己的Babel插件,例如。有one out there,但它已经将近一年没有更新了,所以我怀疑它是否仍然适用于Babel 6。它并不复杂,可能是一个有趣的练习。

zrfyljdw

zrfyljdw3#

面对同样的问题,babel插件https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types对我不起作用(不支持打字)。
我发现的更好的“肮脏黑客”:

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

字符串

相关问题