react 项目,在生产环境去掉 propTypes 检查代码,打包时自动去除

关于PropTypes

  1. PropTypes包含一整套验证器,可用于确保你接收的数据是有效的。
  2. 能帮助我们在开发的时候及时发现问题。
  3. 没有propTypes定义,组件依然能够正常工作,而且,即使在propTypes检查出错的情况下,组件依然能工作。
  4. propTypes只是一个辅助开发的功能,并不会改变组件的行为。

为了验证propTypes的作用,故意违反propTypes规则即可。在项目react-full-stack-learning的分支todo_controlled_component,将todos下的reducer.js的初始值的第一项text改成一个数字10000,如下:

const initialState = [
    {
        text: 10000,
        completed: false,
        id: 0
    },
    {
        text: 'welcome to react and redux learning',
        completed: false,
        id: 1
    }
];

npm start之后,在打开的浏览器控制台会显示如下警告,说明propTypes类型检查已经生效。

Warning: Failed prop type: Invalid prop `text` of type `number` supplied to `TodoItem`, expected `string`.
    in TodoItem (at todoList.js:14)
    in TodoList (created by Connect(TodoList))
    in Connect(TodoList) (at todos.js:12)
    in div (at todos.js:10)
    in Unknown (at TodoApp.js:8)
    in div (at TodoApp.js:7)
    in TodoApp (at src/index.js:10)
    in Provider (at src/index.js:9)

要不要在打包时移除PropTypes代码?

npm run build之后,将编译打包之后的build目录发布到nginx,打开页面查看,并没有如预期中的警告提示。是不是说明在打包的时候已经做了处理了呢?

个人认为,只要打包部署之后,这些代码没有被执行,影响不大,可不必在意。唯一需要考虑的问题就是打包之后的 js 文件大小的问题了。

因为打包之后,并没有看到警告提示,所以,相关的代码是不是已经被移除了呢?因为没有仔细对比,不敢妄下结论。猜测,create-react-app 已经做了优化,见页尾 create-react-app 关于 propTypes 的 Issue。

如果这部分代码特别多,需要考虑应用在移动端的响应速度,就需要考虑在发布打包的时候移除这部分代码。

那么,有没有办法在软件发布的时候,把这些propTypes检查自动去掉呢?答案是肯定的。可以用这个插件解决:babel-plugin-transform-react-remove-prop-types

扩展阅读

使用 PropTypes 进行类型检查

关于项目发布至生产环境时,去掉propTypes检查的问题,create-react-app项目有一个Issue:Removing propTypes in production build?

关于作者

React 项目中,我们需要配置开发环境和生产环境,以便在本地开发和部署到服务器能够有不同的配置。 1. 开发环境配置 在开发环境下,我们需要启动一个本地服务器,以便在浏览器中实查看修改后的代码。为此,我们需要在项目根目录下创建一个 `.env.development` 文件,并在其中定义一些环境变量,例如: ``` NODE_ENV=development PORT=3000 API_URL=http://localhost:8000/api ``` 这些环境变量可以在代码中通过 `process.env` 访问到。例如,在 React 的 `src/index.js` 文件中,我们可以这样使用它们: ``` import React from 'react'; import ReactDOM from 'react-dom'; const apiUrl = process.env.API_URL; ReactDOM.render( <div>{apiUrl}</div>, document.getElementById('root') ); ``` 此外,我们还需要在 `package.json` 文件中添加一个启动命令,以便启动本地服务器: ``` "scripts": { "start": "react-scripts start" } ``` 然后运行 `npm start` 命令即可启动本地服务器。 2. 生产环境配置 在生产环境下,我们需要对代码进行打包,并将静态文件部署到服务器上。为此,我们需要在项目根目录下创建一个 `.env.production` 文件,并在其中定义一些环境变量,例如: ``` NODE_ENV=production API_URL=https://api.example.com/api ``` 这些环境变量同样可以在代码中通过 `process.env` 访问到。 然后,我们需要在 `package.json` 文件中添加一个打包命令,以便打包代码: ``` "scripts": { "build": "react-scripts build" } ``` 运行 `npm run build` 命令即可打包代码打包后的静态文件将会生成在 `build` 目录下,我们可以将其部署到服务器上。部署方式可以根据具体情况选择,例如通过 FTP 上传到服务器、使用云服务提供商的部署工具等等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值