如何在 CRA 弃用后创建 React 应用程序-js教程-PHP中文网

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

碧海醫心

发布： 2024-12-21 09:15:01

原创

430人浏览过

如何在 cra 弃用后创建 react 应用程序

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

Vite vs. Webpack

Vite

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

Webpack

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

使用 Vite 创建 React 应用

创建新项目：

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

登录后复制

启动开发服务器：

npm run dev

登录后复制

Vite 配置:

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

情感家园企业站5.0 多语言多风格版

一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！

查看详情

使用 Webpack 创建 React 应用

初始化项目：

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

登录后复制

创建项目结构：

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

配置 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,
  },
};

登录后复制

配置 Babel：

创建 .babelrc 文件：

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

登录后复制

启动开发服务器：

npx webpack serve

登录后复制

总结

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

以上就是如何在 CRA 弃用后创建 React 应用程序的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

javascript如何与CSS交互_怎样动态修改样式和类名？ javascript性能如何优化_有哪些减少页面重绘的技巧？ javascript如何操作DOM_有哪些高效的方法和最佳实践 javascript如何实现页面元素的动态隐藏与显示？_javascript中的DOM操作有哪些技巧？ javascript如何实现移动端适配_响应式设计有哪些要点