Create React App 2.0 新功能

Create React App 是一个官方提供的用于快速搭建 React 应用的脚手架工具，它可以快速生成一个可用的 React 开发环境，省去了配置环境的麻烦，让开发者专注于业务开发。

Create React App 2.0 增加了许多新功能，本文将一一为您介绍。

升级 Babel 7

Create React App 2.0 升级了 Babel 到 7.0 版本，这使得它支持了更多的 JavaScript 特性。同时，这也让开发者能够自定义 Babel 配置，通过在项目根目录下创建 babel.config.js 文件来自定义配置。

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        modules: false
      }
    ],
    "@babel/preset-react"
  ],
  plugins: [
    "transform-class-properties"
  ]
}

新增 PWA 支持

Create React App 2.0 新增了 PWA (Progressive Web App) 支持，这意味着可以将应用程序转换为一个可离线使用的 Progressive Web App。只需简单的修改配置文件并添加必要的文件，您的应用程序就可以像 Native 应用程序一样在离线状态下正常运行。

// 修改 index.js
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.register();

改进性能

Create React App 2.0 改进了它的性能，将其从旧版的 20 秒降低到仅需 4 秒。这得益于使用了更有效的 Webpack 配置和 JavaScript 模块化。

自定义 Webpack 配置

Create React App 2.0 允许您在不弃用脚手架的情况下自定义 Webpack 配置，只需在项目根目录下创建一个 "config" 文件夹和一个 "webpack.config.js" 文件。然后，Create React App 将自动加载外部配置以构建你的应用程序。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

新的环境变量

Create React App 2.0 引入了新的环境变量，让您能够在不同的开发环境中设置不同的变量:

• .env: 默认环境变量文件，适用于所有情况。
• .env.local: 本地开发环境变量文件，比 .env 优先级高。
• .env.development, .env.production, .env.test: 根据不同的 NODE_ENV 环境变量的值，加载不同的环境变量文件。
• 环境变量名必须以 REACT_APP_ 开头，才能被加载到应用程序中。

// 设置环境变量
REACT_APP_API_URL=http://localhost:3001

// 使用环境变量
const url = process.env.REACT_APP_API_URL;

结语

这些新功能让 Create React App 更加强大和灵活，为 React 开发提供了极大的便利。希望本文已经为您介绍了 Create React App 2.0 的新功能，并帮助您更好的使用它。