Create React App 2.0 有什么新功能？

那些不知道 create-react-app 是 CLI 或用于生成 React 应用程序的命令行界面工具的人，它比设置自己的 web pack 配置更容易。

包更新：

通天塔 7
网络包 4
开玩笑 23

Babel：浏览器对 JavaScript 的现代特性的支持最近变得更好了，但它永远不会是完美的。我们可以在 polyfills 中打补丁或使用一个小的 shell 脚本来重写我们的代码，但是这些很容易破坏导致死代码。 Babel 通过采用现代 JavaScript 并将其编译为可以在不同环境中理解的形式来解决这个问题。 Babel 建立在一个插件系统之上，该系统将我们的现代 JavaScript 解析为抽象语法树或 AST，并将其重写为浏览器可以解释的版本。要设置它，请安装 babel CLI 包并将其保存为开发依赖项。

npm install --save-dev babel-cli

换句话说，它用于编译更新的 es6 plus 特性，以便在所有浏览器中使用。 Babel 版本 7 比以前的版本更快，因为它添加了一些新功能。

Webpack：它是一个模块构建器，即 webpack 是我们在代码开发过程中使用的工具，并在资产运行时使用。 Webpack 不仅构建您的代码，还管理您的代码。它允许我们创建很棒的 Web 应用程序来管理我们所有的样式和 JavaScript 文件，主要但不限于此。

Webpack 用于捆绑。

Jest： Jest 用于测试，它包括交互式快照模式和自定义匹配等新功能。 Jest 适用于使用以下项目的项目：Babel、TypeScript、Node、React、Angular、Vue 等等！

create-react-app 的版本 1 具有 sass 集成，但需要完成一些额外的配置。使用版本 2，我们可以简单地安装“node-sass”，我们可以将我们的 .CSS 文件重命名为 .SCSS。所以它使使用 sass 更容易。
CSS 的模块允许我们在不同的文件中使用相同的 CSS 类，而不必担心冲突或问题。 CSS 模块可以通过 create react app 开箱即用，因此您可以使用如下所示的语法导入模块， [Name].module.scss或[Name].module.css 。
因此，除了 sass 集成和 CSS 模块之外，我们还有更小的 CSS 包，我们可以使用浏览器列表规范中的package.json文件来定位现代浏览器。因此，我们可以在必要时调整样式以仅针对 WebKit 前缀或 MS 前缀。

包.json：

{
"name": "my-project",
"version": "0.1.0",
"private": true,
"dependencies": {
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.5.0",
  "@testing-library/user-event": "^7.2.1",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "react-scripts": "3.4.3"
},
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
"eslintConfig": {
  "extends": "react-app"
},
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}
}

还添加了 Post CSS 以创建一个反应应用程序。
因此，如果您使用过第 2 版，您可能首先注意到的是登陆页面的变化，它现在变得更简单、更干净，或者更干净的页面，如下所示：

版本 1

版本 2

服务工作者的实现方式也发生了变化，第 2 版现在使用 Google 的工作箱，这是一组用于缓存离线资产并以比sw-precache更优雅的方式与服务工作者合作的库，这将使我们更容易使用 React 库创建渐进式 Web 应用程序。
现在增加了对使用 express 和全栈应用程序配置我们自己的代理的支持，因此我们可以像 HTTP 代理中间件模块一样使用，然后在名为 setupProxy.js 的源文件夹中的 React 应用程序中的客户端上创建一个文件，而不是而不是像以前那样定义代理对象。
我们现在可以使用为最新的 Node 版本编写的包。
我们现在可以将 SVG 作为 React 组件导入，这与之前导入 SVG 并将其添加到图像的源属性不同，但现在我们可以将其导入并用作实际组件。
还有一种叫做 yarn plug-n-play 的东西，通常，当我们运行yarn install时，我们所有的包都会被安装，然后使用 plug-n-play 缓存在 node modules 文件夹中，而不是这样做，一个包含静态的新文件创建解析表，该文件包含依赖树上可用的包，还包括它们的链接方式和位置。
不再支持节点 6。
对旧浏览器（IE 9 到 11）的支持需要单独的包。
删除了对 .mjs 扩展的支持。
对代理对象的支持已替换为自定义代理支持。
PropTypes 定义会自动从生产版本中删除。