最近，随着 React Native 技术的普及，使用 React Native 开发 APP 的工作也越来越多，而 rn-razzle 这个 npm 包可以方便地将 React Native 项目打包成一个 web 应用，从而可以在浏览器端运行，本篇文章将详细介绍如何使用 rn-razzle 包进行项目打包。
简介
rn-razzle 是一个基于 React Native 的项目打包工具，使用它可以将 React Native 项目打包成一个 web 应用，从而解决了在浏览器端调试 React Native 项目的问题。rn-razzle 快速、简单、灵活，可以帮助开发者快速地将 React Native 项目打包成 web 应用。
安装
在开始使用 rn-razzle 之前，需要先安装 Node.js 和 React Native。安装完成之后，在命令行中输入以下命令进行 rn-razzle 安装：
npm install -g rn-razzle
使用方法
在安装完成之后，就可以使用 rn-razzle 进行项目打包了。下面是使用 rn-razzle 进行项目打包的详细步骤：
1. 创建一个 React Native 项目：
react-native init myapp
2. 进入项目目录：
cd myapp
3. 安装 rn-razzle：
npm install rn-razzle --save-dev
4. 安装 babel-loader：
npm install babel-loader --save-dev
5. 在项目根目录下创建一个文件夹，如：razzle：
mkdir razzle
6. 在 razzle 目录下创建 webpack.config.js 文件，内容如下：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ------------------
-------- ---------------
------- --------------------------------
-------- -
--------------- -----
-------- ---------------------
-------- -----------------
--
--
--
--
--7. 在 package.json 文件中添加以下配置：
"scripts": {
"razzle": "razzle start",
"start": "node node_modules/react-native/local-cli/cli.js start",
},8. 修改 App.js 文件，将 import 的 ReactNative 组件修改为 react-native-web：
import { AppRegistry } from 'react-native-web';9. 运行打包命令：
npm run razzle
在打包完成后，会在项目根目录下生成一个 build 文件夹，里面包含打包好的 web 应用文件。可以通过打开 build/index.html 文件来查看应用的运行效果。
示例代码
下面是一个简单的 React Native 项目，使用了 rn-razzle 进行了打包：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ----- ----- ----------- ----- - ---- -------------------
------ ------- ----- --- ------- --------------- -
-------- -
------ -
----- -------------------------
----- -------------------------- ------ ----------
----------- --------------------------
------
--------------------
--------
----------------------------------------
-
--
----- --------------------
----- ------ --- - -------- ----------------- ------- - ------- ------------ ----- ------ -------- ----- ------ ----- --- -------------- --- ------------------
-------
-------------
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
---------------- -------
----------- ---------
--------------- ---------
--
------ -
--------- ---
----------- -------
--------------- ---
--
----------- -
------ ------
--------------- ---
--
------ -
------ -------
------- ----
----------- --------
--------------- ---
--
----- -
---------- ----------
----------- ---
--
---结语
通过本文的介绍，相信读者已经了解了如何使用 rn-razzle 快速、方便地将 React Native 项目打包成 web 应用。rn-razzle 的使用不仅方便了开发人员的调试工作，还能够在有限的资源下实现多端共用代码，减轻项目成本压力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c8b81e8991b448ebeb0