参观：CreateReactAppv3中的新功能

嘘！ create-react-app v3.0.0 刚刚由 React 团队发布！在本文中，我们将介绍最重要的功能并介绍一些有趣的代码片段。

我没有尝试提供 v3.0.0 中更改的综合列表，而是按工具和库（TypeScript、Jest 等）进行分组，以便您可以挑选您想阅读的内容。

强调

`browserslist`

也许最大的功能之一是能够使用 browserslist 工具来定位特定的浏览器。

当 Babel 转换你的代码时，它会查看你的browserslist中的设置package.json并使用适当的 polyfills & transforms。这些是默认设置：

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

在生产中，您的应用程序将包含所有用于至少具有 0.2% global 使用量的浏览器的 polyfill/transforms，但是，它将忽略 Opera Mini（1.6% global 使用量）。 browserslist 使用来自 caniuse.com 的全球使用数据。

例如，如果你想以 Edge 16 为目标，你仍然可以使用数组破坏：

// Shiny, new ECMASCript features!
const array = [1, 2, 3];
const [first, second] = array;

// ...Babel transforms for Edge 16
const array = [1, 2, 3];
const first = array[0];
const second = array[1];

PostCSS 标准化

PostCSS Normalize 是由构建 browserslist 的同一个人制作的。 PostCSS Normalize 类似于 browserslist，但它不是转换您的 JavaScript 代码，而是转换您的 CSS 样式表。

如果您已经在 package.json 中有 browserslist 声明，那么它就已经知道您要定位哪些浏览器！您需要做的就是在您的一个 CSS 文件的顶部包含 @import-normalize。

例如，如果您的目标是 Internet Explorer 9+，它将包括以下样式：

@import-normalize;
/* Add the correct "display" values in IE 9 */
audio,
video {
  display: inline-block;
}

/* Remove border for img inside <a> tags IE 10 */
img {
  border-style: none;
}

但是，如果你只想支持 IE 10+

@import-normalize;
/* Remove border for img inside <a> tags IE 10 */
img {
  border-style: none;
}

使用 PostCSS Normalize，即使您使用 Chrome 进行所有开发，您也可以放心，它在 Firefox/Safari/Opera/etc 上看起来完全一样。当我们向使用奇怪浏览器的朋友炫耀我们的“甜蜜网站”并且您的网站看起来像杂碎时，我觉得我们都有这样的故事。用 PostCSS Normalize 告别那些日子！

钩子上的绒毛

随着 React v16.8，新的 Hooks API 终于登陆了！现在 Create React App v3 预装了一个 linting 配置来帮助你编写“最佳实践”Hooks。 Hooks 有两个 linter 规则：

从 React 函数组件调用 Hooks
从自定义 Hooks 调用 Hooks

就是这样！它们与您使用 Hook 的位置有关，以防止您可能在 for-loop 中使用 Hook 并使用 useState 和 useEffect 造成各种破坏的情况。如果您想要关于 Hooks 的快速入门式指南，请查看 React Hooks 简介 🤓！

开玩笑 24

create-react-app 现在随附 2019 年 1 月下旬发布的最新版本 Jest (v24)。如果您一直在使用 Jest，您肯定会想查看他们的公告，该公告提供了所有新功能的概览！

打字稿

那些使用 TypeScript 的人，这个新版本的 Create React App 将检测和 lint .ts 文件。这似乎是对 TypeScript 支持的一个巨大姿态，尤其是考虑到 Flow 的 linting 规则不太全面。这些是 Create React App v3 附带的默认 linting 规则：

'@typescript-eslint/no-angle-bracket-type-assertion': 'warn',
'@typescript-eslint/no-array-constructor': 'warn',
'@typescript-eslint/no-namespace': 'error',
'@typescript-eslint/no-unused-vars': [
  'warn',
  {
    args: 'none',
    ignoreRestSiblings: true,
  },
]

视觉工作室代码

最后，如果您使用 Visual Studio，您的 jsconfig.json 和 tsconfig.json 文件中最终将支持 baseUrl。这意味着您可以使用绝对 imports：

import DashboardContainer from '../../../containers/DashboardContainer'  // 👈 this...
import DashboardContainer from 'containers/DashboardContainer'  // 👈 becomes this!

这允许您将“查找”优先级从 node_modules 更改为 src 文件夹。通常，它会在您的 node_modules 文件夹中查找 containers 包。

📝 感谢阅读！官方发布说明到这里