移除react項目中prop-types代碼

在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