Better

在看 Create React App 文档中，了解到的一些小工具，以及如何管理多环境

npm 不一样啦

在 npm 5.2+，新增 npx 命令，推荐使用 npx 创建项目，它会使用最新的版本

npx create-react-app my-app

在 npm 6+，支持使用 npm init 命令指令一个初始器，使用如下

npm init react-app my-app

通过 --template 参数来指定模板，比如 typescript

npx create-react-app my-app --template typescript

node 版本切换

node 版本切换神器

• macOS/Linux：nvm
• windows：nvm-windows

组件开发

通用组件管理工具

• Storybook for React
• React Styleguidist

yarn vs npm

yarn vs npm

• 了解 yarn，通过 Zero Install 概念，让依赖安装速度不在是瓶颈

关于使用 yarn 和 npm，具体选择谁，特意自习查阅了很多的讨论。但却依旧没有自己的答案，貌似随着 npm 的发展，yarn 代码的优势似乎不是那么明显了。秉着如无必要，勿增其繁的选择，依旧保持使用 npm 吧。

环境变量

通常一个项目会同时存在多份环境，在 React 中可以怎么管理呢？

• 通过 .env 文件声明环境变量，比如 .env、.env.local、env.development、env.test、env.production 等等
  • npm start：development
  • npm run build：production
  • npm test: test
• 如果上述三个环境不够用，你还可以通过 env-cmd 模块进行自定义设置
• HTML 文件中可以通过 %REACT_APP_PARAM% 的方式进行引用

v4.0.3 更新 20211109

最新版 CRA 新增内容

• 默认使用 yarn 进行项目管理
• 新增 react-app/jest eslintConfig
• 新增 web-vitals 进行性能统计，比如接入 ga 或者自己的数据分析服务
• 移除内置 serviceWorker 对于缓存和离线的支持
  • 后续可以考虑支持一下
  • 但会使调试部署更具挑战性
• 测试框架选型
  • jest
  • jest-dom：因为 jest 本身是一个 node 测试框架，扩展支持浏览器端扩展
  • react-testing-library
  • 组件测试：不同的项目根据组件更改的频率以及它们包含多少逻辑来选择不同的测试取舍，但一个简单的冒烟测试，简单的测试组件能否正常渲染，是一个投入很少但回报很大的尝试
  • src/setupTests.js 每次运行单测前会自动执行，你也可以通过 setupFilesAfterEnv 自行配置
  • 支持配置单测调试