React Native Esbuild 使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00961/article/details/141619792

React Native Esbuild 使用教程

react-native-esbuildFast bundler and dev server for react-native using esbuild项目地址:https://gitcode.com/gh_mirrors/re/react-native-esbuild

1. 项目的目录结构及介绍

React Native Esbuild 项目的目录结构如下：

react-native-esbuild/
├── example/
│   ├── android/
│   ├── ios/
│   ├── src/
│   ├── package.json
│   └── ...
├── packages/
│   ├── dev-server/
│   ├── esbuild-plugin-babel/
│   ├── esbuild-plugin-react-native/
│   └── ...
├── lerna.json
├── package.json
└── ...

目录结构介绍

example/: 包含示例应用程序的代码，包括 Android 和 iOS 平台的配置文件。
packages/: 包含各个子包的代码，如开发服务器、Babel 插件等。
lerna.json: Lerna 配置文件，用于管理多包仓库。
package.json: 主项目的依赖和脚本配置。

2. 项目的启动文件介绍

项目的启动文件主要位于 example/ 目录下，具体包括：

example/package.json: 示例项目的依赖和脚本配置。
example/src/: 示例应用程序的源代码。

启动文件介绍

example/package.json:

{
  "scripts": {
    "start": "react-native esbuild-start",
    "build:android": "yarn bundle:android",
    "build:ios": "yarn bundle:ios"
  }
}

该文件定义了启动和构建示例应用程序的脚本。

example/src/: 该目录包含示例应用程序的源代码，通常包括入口文件如 index.js 或 App.js。

3. 项目的配置文件介绍

项目的配置文件主要位于项目根目录和 example/ 目录下，具体包括：

react-native.config.js: 主项目的配置文件。
example/android/app/build.gradle: Android 项目的构建配置。
example/ios/: iOS 项目的配置文件。

配置文件介绍

react-native.config.js:

const [commands] = require('react-native-esbuild');
module.exports = [commands];

该文件定义了项目的命令配置。

example/android/app/build.gradle:
```
project.ext.react = [
  enableHermes: false,
  bundleCommand: "esbuild-bundle"
]
```
该文件定义了 Android 项目的构建配置。
example/ios/: 该目录包含 iOS 项目的配置文件，如 Podfile 和 Xcode 项目文件。