游览：Create React App v3中的新功能

最新推荐文章于 2023-07-11 14:54:20 发布

cukw6666

最新推荐文章于 2023-07-11 14:54:20 发布

阅读量186

点赞数

文章标签： python java javascript vue json ViewUI

原文链接：https://www.digitalocean.com/community/tutorials/react-take-a-tour-create-react-app-version-3

版权

Huzzah! create-react-app v3.0.0 was just announced by the React Team! In this article, we’ll cover the most important features and go over some juicy code snippets.

晕！ React团队刚刚宣布了create-react-app v3.0.0！在本文中，我们将介绍最重要的功能，并介绍一些多汁的代码段。

Instead of attempting to provide a comprehensive list of the changes in v3.0.0, I’ve grouped by tools and libraries (TypeScript, Jest, etc) so that you can cherry-pick what you wanna read.

我没有尝试提供v3.0.0中所做更改的全面列表，而是按工具和库(TypeScript，Jest等)分组，以便您可以挑选想要阅读的内容。

目录 (Table of contents)

强调 (Highlights)

`browserslist` (`browserslist`)

Perhaps one of the biggest features is the ability to use browserslist tools to target specific browsers.

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

As Babel transforms your code, it will look at your browserslist settings in package.json and make use of the appropriate polyfills & transforms. These are the default settings:

当Babel转换代码时，它将查看package.json中的browserslist设置，并使用适当的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"
    ]
  }

In production, your app will contain all of the polyfills/transforms for browsers that have at least 0.2% global usage, however, it’ll ignore Opera Mini (1.6% global usage). browserslist uses the global usage data from caniuse.com.

在生产中，您的应用将包含全球使用率至少为0.2％的浏览器的所有polyfill / transforms，但是，它将忽略Opera Mini(全球使用率为1.6％)。 browserslist使用caniuse.com的全局使用数据。

For example, if you wanted to target Edge 16 you could still use array destructing:

例如，如果要定位到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)

PostCSS Normalize is made by the same folks that are building browserslist. PostCSS Normalize is similar to browserslist, but instead of transforming your JavaScript code, it transforms your CSS stylesheets.

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

If you already have the browserslist declarations in package.json, it already knows what browsers you want to target! All you need to do is include @import-normalize at the top of one of your CSS files.

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

For example, if you’re targeting Internet Explorer 9+ it’ll include these styles:

例如，如果您要定位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;
}

However, if you only want to support IE 10+

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

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

With PostCSS Normalize, even though you’re doing all your development with Chrome you can rest assured that it’ll look exactly the same on Firefox/Safari/Opera/etc. I feel like we all have that story when we’re showing off our “sweet website” to a friend who’s using a weird browser and your website looks like chop suey. Say goodbye to those days with PostCSS Normalize!

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

脱钩 (Linting for Hooks)

With React v16.8, the new Hooks API finally landed! Now Create React App v3 comes preinstalled with a linting config to help you write “best practices” Hooks. There are two linter rules for Hooks:

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

Call Hooks from React function components
从React函数组件调用Hook
Call Hooks from custom Hooks
从自定义挂钩调用挂钩

That’s it! They pertain to where you use Hooks to prevent situations where you might use a Hook inside a for-loop and create all sorts of havoc with useState and useEffect. If you’d like a Quick Start-style guide on Hooks, check out Introduction to React Hooks 🤓!

而已！它们与您使用Hooks的位置有关，以防止可能在for-loop内使用Hook并用useState和useEffect创建各种破坏的useEffect 。如果您想要有关钩子的快速入门风格指南，请查看React Hooks简介 🤓！

笑话24 (Jest 24)

create-react-app now ships with the latest version of Jest (v24) released late-January 2019. If you’ve been using Jest, you will definitely want to checkout their announcement that provides a great overview of all the new features!

create-react-app现在随附于2019年1月下旬发布的最新版本的Jest (v24)。如果您一直在使用Jest，则一定要查看它们的公告，其中对所有新功能进行了概述！

打字稿 (TypeScript)

Those of you that are using TypeScript, this new version of Create React App will detect and lint .ts files. This seems like a huge gesture of support for TypeScript, especially considering that Flow has less comprehensive linting rules. These are the default linting rules that come with Create React App v3:

那些正在使用TypeScript的人，这个新版本的Create React App将检测并.ts文件。这似乎是对TypeScript的巨大支持，特别是考虑到Flow的综合规则不那么全面。这些是Create React App v3随附的默认掉毛规则：

'@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程式码 (Visual Studio Code)

Lastly, if you use Visual Studio there’s finally support for baseUrl in your jsconfig.json and tsconfig.json file. This means you can use absolute imports:

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

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

This allows you to change the “lookup” priority from node_modules to your src folder. Normally, it’d look for a containers package inside your node_modules folder.

这使您可以将“查找”优先级从node_modules为src文件夹。通常，它将在node_modules文件夹中寻找containers包。

📝 Thanks for reading! For the official release notes go here

📝感谢您的阅读！有关官方发行说明，请点击此处