快来了解一下！create-react-app 4.0的新功能

npx create-react-app my-app
// OR
npm init react-app my-app
// OR
yarn create react-app my-app

npm uninstall -g create-react-app

或者卸载它

yarn global remove create-react-app

再运行

npx create-react-app my-app

迁移

当从3.4.x版本迁移到4.0.0版本时，在未被ejected的项目中运行以下内容

npm install --save --save-exact react-scripts@4.0.0

或者

yarn add --exact react-scripts@4.0.0

npm install or yarn install

这样就可以完成迁移，而不会出现任何错误。

新特性

Fast refresh 快速刷新

React 17（新的JSX transform）和TypeScript支持

import React from 'react';

function App() {
  return <p>Hi I am Lawrence Eaglesp>;
}

旧的JSX 转换会将其转换为：

import React from 'react';

function App() {
  return `('p', null, 'Hi I am Lawrence Eagles');
}

function App() {
  return <p>Hi I am Lawrence Eaglesp>;
}

它将转换为：

// 由编译器插入（请勿自己导入！）
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('p', { children: 'Hi I am Lawrence Eagles });
}

注意我们的原始代码不需要导入React，它仍然可以正常工作。

另外，根据您的配置，新的JSX转换可以减小应用程序包的大小。

支持ESLint 7

• 设置为 error 的任何规则都会破坏应用程序的构建过程
• 当使用TypeScript时，你需要提供一个只针对TypeScript文件的 override 对象
• 如前所述，请扩展并且不要替换ESLint规则

{
  "eslintConfig": {
    "extends": ["react-app", "shared-config"],
    "rules": {
      "additional-rule": "warn",
      "indent": ["error", 4]
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn",
          "indent": ["error", "tab"]
        }
      }
    ]
  }
}

• 首先扩展react-app："extends": ["react-app", "shared-config"]
  将任何其他规则设置为 “warn” 以避免停止构建过程："additional-rule": "warn"
• 将一致的缩进样式设置为4个空格："indent": ["error", 4]
• 如果使用TypeScript，请将TypeScript特定的配置放在 override 部分

  "overrides": [
    {
      "files": ["**/*.ts?(x)"],
      "rules": {
        "additional-typescript-only-rule": "warn",
        "indent": ["error", "tab"] // enforce tab indentation.
      }
    }
  ]
  

其他值得注意的变化

不再支持 typescript flag 和 NODE_PATH

要将TypeScript添加到Create React App 4.0.0中，请执行以下操作：

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

代替这个：

npx create-react-app hello-tsx --typescript

• 将Jest升级到26
• 放弃了对Node 8的支持，Node 8在2019年年底达到报废期，不再支持。
• 改用Workbox injectManifest插件，使 PWA 模板独立于自己的仓库。

总结

Create React App 4.0.0是一个重要的版本，它带来了一些很棒的功能。最让我兴奋的是fast refresh。不需要额外的包就能拥有这个功能，真的很不错。

新的JSX转换也是一个很好的补充，但是由于语法不变，因此并不能增强开发人员的体验。

其他更新也很酷，迁移过程是无缝的，这是一件很美好的事情。我们可以通过运行一个命令来获取所有这些更新。

最后，如果您需要有关此版本的更多详细信息，可以在这里找到。

https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md

最后

点个在看支持我吧，转发就更好了