CRA+react-app-rewired 搭建 React H5 架子

CRA+react-app-rewired 搭建 React H5 架子

前言

随着移动互联网的飞速发展，H5 页面在移动端应用中占据着越来越重要的地位。React 作为一种流行的前端框架，凭借其组件化、声明式编程和高性能等优势，成为构建 H5 页面的不二之选。

然而，使用 React 开发 H5 页面时，往往需要对项目进行大量的配置，包括 CSS、JavaScript、图片资源等，这对于初学者来说可能会遇到很多困难。

为了解决这一问题，我们可以使用 create-react-app (CRA) 脚手架和 react-app-rewired 库来快速搭建一个 React H5 项目。CRA 是一个官方推荐的 React 项目构建工具，它可以帮助我们快速生成一个包含所有必要依赖项和配置的项目模板。react-app-rewired 是一个用于扩展 CRA 配置的库，它允许我们修改 CRA 的默认配置，以便满足我们的项目需求。

项目搭建

1. 安装 CRA

首先，我们需要安装 CRA 脚手架。我们可以使用以下命令在全局安装 CRA：

npm install -g create-react-app

安装完成后，我们就可以使用 CRA 来创建一个新的 React 项目了。

2. 创建项目

在终端中，导航到您想要创建项目的目录，然后运行以下命令：

create-react-app my-react-app --template @snowpack/app-template-react

上面的命令将创建一个名为 my-react-app 的新项目。其中，--template @snowpack/app-template-react 参数指定了我们要使用 Snowpack 作为项目构建工具。Snowpack 是一个快速且轻量级的构建工具，它非常适合构建 H5 项目。

3. 安装 react-app-rewired

接下来，我们需要安装 react-app-rewired 库。我们可以使用以下命令在项目中安装 react-app-rewired：

npm install --save react-app-rewired

安装完成后，我们需要在项目的根目录下创建一个名为 config-overrides.js 的文件。在这个文件中，我们将使用 react-app-rewired 来修改 CRA 的默认配置。

const { override, fixBabelImports, addLessLoader, addWebpackAlias } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  addLessLoader(),
  addWebpackAlias({
    '@': resolve('src'),
  }),
);

在上面的代码中，我们使用了 customize-cra 库来修改 CRA 的默认配置。我们首先使用 fixBabelImports 插件来配置对 Ant Design 组件库的支持。然后，我们使用 addLessLoader 插件来添加对 Less CSS 预处理器的支持。最后，我们使用 addWebpackAlias 插件来添加对别名的支持。

4. 配置项目

接下来，我们需要配置项目。我们可以打开 package.json 文件，并在其中添加以下内容：

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build"
  }
}

在上面的代码中，我们修改了 start 和 build 脚本，以便使用 react-app-rewired 来启动和构建项目。

5. 运行项目

现在，我们可以运行项目了。在终端中，导航到项目目录，然后运行以下命令：

npm start

上面的命令将启动项目。您可以在浏览器中打开 http://localhost:3000 来查看项目。

6. 部署项目

项目开发完成后，我们需要将其部署到服务器上。我们可以使用以下命令来构建项目：

npm run build

上面的命令将在 build 目录中生成一个包含所有必要文件的静态网站。我们可以将这些文件上传到服务器上，以便用户访问。

总结

以上就是使用 CRA 和 react-app-rewired 搭建 React H5 项目的步骤。通过这种方式，我们可以快速搭建一个基于 vw 的 H5 项目，该项目包含对 CSS、JavaScript 和项目构建的全面配置。希望本指南对您有所帮助。