移除react项目中proptypes代码

在 React 项目中，我们为了保证项目的健壮性所以引入了 prop-types。但在生产环境，我们并不需要 prop-types 生成的代码。

prop-types 已经自动做了些什么?

在项目中我们通常按下方示例来使用prop-types':

import PropTypes from 'prop-types'
TestClass.propTypes = {propName: PropTypes.string}

在开发环境中，这些代码会帮我们校验 prop 的类型，这无疑是很有用的。

在产品环境中我们并不需要这些校验。

通过查看 prop-types 的源码，了解到当 process.env.NODE_ENV === 'production' 时prop-types为了我们移除了类型校验。

虽然移除了校验，但在代码中写下的那些 propTypes 依旧还在

通过插件移除生成的 propTypes

安装 babel 插件

npm install --save-dev babel-plugin-transform-react-remove-prop-types

看到这个插件，第一反应是名字是真长。

在 .babelrc 中配置

 "env": {
      "production": {
          "plugins":  [
              [
                  "transform-react-remove-prop-types",
                  {
                      "mode": "remove",
                      "removeImport": true,
                      "ignoreFilenames": ["node_modules"]
                  }
              ]
          ]
      }
}

以上配置指定当 process.env.NODE_ENV === 'production' 时，触发对 prop-types 的清除。使用到的参数介绍如下:

• mode: 清除 prop-types 生成的代码
• removeImport: 清除 import 引入的代码
• ignoreFilenames: 忽略 node_modules 中的代码

配置成功后，代码体积相应减少，并在生成的文件中查验 propTypes 已清除。

写在最后:
推荐个表格组件: gridmanager