如何在 CRA 弃用后创建 React 应用程序

大家好，今天本人给大家带来文章《如何在 CRA 弃用后创建 React 应用程序》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

React团队弃用create-react-app (CRA)后，开发者们转向了Vite和Webpack等替代方案来构建React应用。本文将对比这两个工具，并提供各自的入门配置指南。

Vite vs. Webpack

Vite

• 优点: 超快的开发服务器，配备即时热模块替换 (HMR) 功能；内置支持现代JavaScript特性；配置简洁。
• 缺点: 相对较新的工具，社区支持可能不如Webpack成熟。

Webpack

• 优点: 高度可配置且灵活，适用于复杂构建场景；拥有庞大的插件生态系统和强大的社区支持；经受了众多大型应用的考验。
• 缺点: 初始配置较复杂，耗时较长；构建速度比Vite慢。

使用 Vite 创建 React 应用

1. 创建新项目：

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

2. 启动开发服务器：

npm run dev

Vite 配置:

Vite 的默认配置通常足以满足大多数React项目的需求。如有必要，可通过 vite.config.js 进行自定义。

使用 Webpack 创建 React 应用

1. 初始化项目：

mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react

2. 创建项目结构：

• 创建 src 文件夹，并在其中添加 index.js 和 App.js 文件。
• 创建 public 文件夹，并在其中添加 index.html 文件。

3. 配置 Webpack：

创建 webpack.config.js 文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

4. 配置 Babel：

创建 .babelrc 文件：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

5. 启动开发服务器：

npx webpack serve

总结

Vite 和 Webpack 都能胜任创建无CRA的React应用。Vite 提供更快速、简单的设置，适合小型项目和快速原型开发；Webpack 则提供更强大的可配置性和丰富的生态系统，适合复杂项目。 选择最适合您项目需求的工具。 祝您编码愉快！

终于介绍完啦！小伙伴们，这篇关于《如何在 CRA 弃用后创建 React 应用程序》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！