参观一下创建 React 应用程序 v3 的新功能

Huzzah!‘create-react-app’ v3.0.0 刚刚由 React Team 宣布! 在本文中,我们将涵盖最重要的功能,并讨论一些果汁的代码片段。

相反,我试图提供 v3.0.0 中的更改的全面列表,我已经根据工具和库(TypeScript,Jest,等)组合,这样你就可以选择你想要读的东西。

内容表

突出

`浏览器`

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

随着 Babel 转换您的代码,它将查看您在 package.json 中的浏览器列表设置,并使用适当的 polyfills & transforms。

 1"browserslist": {
 2    "production": [
 3      ">0.2%",
 4      "not dead",
 5      "not op_mini all"
 6    ],
 7    "development": [
 8      "last 1 chrome version",
 9      "last 1 firefox version",
10      "last 1 safari version"
11    ]
12  }

在生产中,您的应用程序将包含所有具有至少 0.2% 全球使用率的浏览器的 polyfills/transforms,但它将忽略 Opera Mini (1.6% 全球使用率)。

例如,如果你想瞄准 Edge 16,你仍然可以使用数组破坏:

1// Shiny, new ECMASCript features!
2const array = [1, 2, 3];
3const [first, second] = array;
4
5// ...Babel transforms for Edge 16
6const array = [1, 2, 3];
7const first = array[0];
8const second = array[1];

邮政正常化

PostCSS Normalize是由构建浏览器列表的相同的人创建的 PostCSS Normalize 类似于浏览器列表,但而不是转换你的 JavaScript 代码,它转换你的 CSS 样式表。

如果你已经在package.json中有浏览器列表的声明,它已经知道你要瞄准哪个浏览器!你所需要做的就是在你的CSS文件的顶部添加@import-normalize。

例如,如果您瞄准 Internet Explorer 9+,它将包含以下样式:

 1@import-normalize;
 2/* Add the correct "display" values in IE 9 */
 3audio,
 4video {
 5  display: inline-block;
 6}
 7
 8/* Remove border for img inside <a> tags IE 10 */
 9img {
10  border-style: none;
11}

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

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

有了 PostCSS Normalize,即使你正在用Chrome进行所有开发,你可以放心它在Firefox/Safari/Opera/etc上会看起来完全相同,我觉得当我们向一个使用奇怪浏览器的朋友展示我们的甜点网站时,我们都有这个故事。

对于Hooks来说

有了 React v16.8,新的 Hooks API终于降落了!现在Create React App v3 预先安装了链接配置,以帮助您编写最佳实践链接。

来自 React 函数组件
来自自定义 Hooks 的 Call Hooks

这就是它! 它们涉及到你使用胡子来防止在一个为循环中使用胡子并通过useState和useEffect创建各种破坏的情况。

已24

「Create-react-app」现在配备了最新版本的 Jest (v24) 2019年1月底发布。

类型

那些正在使用 TypeScript,这个新的版本的创建反应应用程序会检测和链接 `.ts’ 文件. 这似乎是一个巨大的手势支持TypeScript,特别是考虑到流有较少全面的链接规则. 这是默认链接规则与创建反应应用程序 v3 一起来的:

 1'@typescript-eslint/no-angle-bracket-type-assertion': 'warn',
 2'@typescript-eslint/no-array-constructor': 'warn',
 3'@typescript-eslint/no-namespace': 'error',
 4'@typescript-eslint/no-unused-vars': [
 5  'warn',
 6  {
 7    args: 'none',
 8    ignoreRestSiblings: true,
 9  },
10]

视觉工作室代码

最后,如果您使用Visual Studio,在您的jsconfig.json和tsconfig.json文件中最终支持baseUrl。

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

这允许你从node_modules更改lookup优先级到你的src文件夹,通常在你的node_modules文件夹中寻找一个containers包。

感谢阅读! 关于官方发布笔记去这里